Page 234 - css揭秘

尽管这个提示框在展示过程中的过渡效果看起来是符合预期的，但是当
输入框失去焦点、提示框收缩并消失时，这个过渡过程就不是我们所期望的
结果了（参见图 8-11）。这到底是怎么回事？！这个结果似乎在我们意料之
外，但其实也在情理之中：当我们把焦点从输入框中切出去的时候，所触发
的过渡会以 scale(1) 作为起始值，并以 scale(0) 作为最终值。由于此时
是相同的调速函数在起作用，这个过渡仍然会在 350ms 后到达 110% 的变形
程度。只不过在这里，110% 变形程度的解析结果并不是 scale(1.1)，而是
scale(-0.1) ！

图 8-11
这到底是怎么回事

不过也别灰心，因为修复这个问题不过是多加一行代码而已。假设我们
只想给提示框的关闭过程指定普通的 ease 调速函数，那么可以在定义关闭
状态的 CSS 规则中把当前的调速函数覆盖掉：

input:not(:focus) + .callout {
transform: scale(0);
transition-timing-function: ease;
}

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

这时候再试一试，就会发现提示框关闭的过程已经恢复到我们设置自定
义 cubic-bezier() 函数之前的样子了，而它的展开过程仍然保留了我们想
要的弹性效果。

细心的读者可能还会发现另一个问题：提示框的关闭动作明显要迟钝一
些。这又是为什么呢？我们来仔细想想看。在提示框的展开过程中，当时间
进行到 50% 时（即 250ms 之后），它就已经达到 100% 的完整尺寸了。但
在收缩的过程中，从 0 到 100% 的变化会花费我们为过渡所指定的所有时间
（500ms），因此感觉上会慢一半。

要修复这个问题，只需同时覆盖过渡的持续时间即可：我们既可以单独
覆盖 transition-duration 这一个属性，也可以用 transition 这个简写属
性来覆盖所有的值。如果选择后者的话，就不需要显式指定 ease 了，因为

42 缓动效果 203

඀ࠡ JOEC