Page 233 - css揭秘

input:focus + .callout { animation: elastic-grow .5s; }

.callout { transform-origin: 1.4em -.4em; }

动手尝试之后，我们就会看到这个改动确实发挥了作用。你可以在图
8-9 中看到它的效果，不妨与前一个过渡对比一下。不过，这里其实只是需
要一个过渡而已，而我们本质上使用了一个动画。动画确实更加强大，但在
这个场景中，我们所需要的其实只是给这个过渡加入一些弹性的感觉，因此
动画在这里显得大材小用了，有一种杀鸡用牛刀的感觉。有没有可能只用过
渡就做出这个效果呢？

图 8-9
如果给这个过渡加入一些弹性的
感觉，UI 会显得更加真实和生动

这个问题的解决方案仍然来自于自定义调速函数 cubic-bezier()。到
目前为止，我们只是讨论了曲线的控制锚点处在 0~1 区间内的情况。前面
曾经提到过，我们无法在水平方向上超越这个范围，至少在时光机发明之前
是不可能的；但我们可以在垂直方向上突破 0~1 区间，从而让过渡达到低
于 0 或高于 100% 的程度。你能猜到这意味着什么吗？它表示如果我们要从
scale(0) 的变形程度过渡到 scale(1)，就还将经历一个比最终值更大的状
态，比如 scale(1.1)（或者更甚，这取决于调速函数有多陡）。
在这个例子中，我们只想加入一点弹性效果，因此希望调速函数可以先
达到 110% 的程度（相当于 scale(1.1)），然后再过渡回 100%。让我们从
初始的调速函数 ease（cubic-bezier(.25,.1,.25,1)）开始，然后把第二
个控制锚点向上移，直至调到类似 cubic-bezier(.25,.1,.3,1.5) 的程度。
在图 8-10 中可以看到，现在这个过渡会在总时长 50% 的时间点达到 100%
的变形程度。不过，过渡过程并不会停在那里；它会在超越最终值之后继
续推进，在 70% 的时间点达到 110% 的变形程度峰值，然后在最后可用的
30% 时间里过渡回它的最终值。可见，整个过渡的推进过程非常接近前面
的动画方案，但它只需要一行代码就可以实现整个效果。我们把代码列在下
面，作为对比：
动画进度 input:not(:focus) + .callout { transform: scale(0); }

时间
.callout {
图 8-10 transform-origin: 1.4em -.4em;
这个自定义的调速函数在垂直坐 transition: .5s cubic-bezier(.25,.1,.3,1.5);
}
标上已经超出 0~1 区间了

202 第 8 章 过渡与动画

඀ࠡ JOEC