Page 235 - css揭秘

它本来就是初始值：

input:not(:focus) + .callout {
transform: scale(0);
transition: .25s;
}

.callout {
transform-origin: 1.4em -.4em;
transition: .5s cubic-bezier(.25,.1,.3,1.5);
}

图 8-12
以 rgb(100%, 0%, 40%) 和
rgb(50%, 50%, 50%)（即 灰
色 gray）这两种颜色为例，我们
用 cubic-bezier(.25,.1,.2,3)
这个调速函数进行弹性过渡会得
到这样的结果。RGB 三个通道
的值是独立进行插值运算的，因
此这个过渡过程中可能会产生
rgb(0%, 100%, 60%) 这样怪异的
颜色。你可以到 play.csssecrets.
io/elastic-color 亲身体验 虽然弹性过渡在很多种类的过渡中都可以收到不错的效果（比如本节
“难题”中的那些例子），但在某些时候它产生的结果可能会相当糟糕。典型
的反面案例出现在对颜色属性的弹性过渡中。尽管两种颜色发生弹性过渡的
结果可能会相当有趣（参见图 8-12），但这种效果在 UI 场景下通常是不合
适的。

为避免不小心对颜色设置了弹性过渡，可以尝试把过渡的作用范围
限制在某几种特定的属性上，而不是像以前那样什么都不指定。当我们在
小提示
transition 简写属性中不指定任何属性时，transition-property 就会得
说到把过渡的作用范围限制 到它的初始值：all。这意味着只要是可以过渡的属性，都会参与过渡。因
在特定属性上，你甚至可以通过 此，如果我们以后在提示框打开状态的样式规则中增加一行 background 声
transition-delay 属 性 把 各 个
属性的过渡过程排成列队，这个 明，那么弹性过渡也会作用在这个属性上。所以最终完美版的代码应该是这
属性的值实际上就是 transition 样的：
简写属性中的第二个时间值。举
例来说，如果 width 和 height input:not(:focus) + .callout {
都需要过渡效果，而且你希望高 transform: scale(0);
度先变化然后宽度再变化（很 transition: .25s transform;
多弹出框脚本库已经把这种动画 }
效果推广开来了），就可以这样
写：transition: .5s height, .callout {
transform-origin: 1.4em -.4em;
.8s .5s width;（也就是说， transition: .5s cubic-bezier(.25,.1,.3,1.5) transform;
让 width 过渡的 延 时 正好等于 }
height 过渡的持续时间）。

204 第 8 章 过渡与动画

඀ࠡ JOEC