Page 232 - css揭秘

弹性过渡

假设有一个文本输入框，每当它被聚焦时，都需要展示一个提示框。这 小提示
个提示框用来向用户提供帮助信息，比如字段值的正确格式等。结构代码可
如果你打算用 height 而不
能是这样的：
是变形属性来实现提示框的展示
动画，可能会发现从 height: 0
<label>
Your username: <input id="username" /> （或其他值）到 height: auto 的
<span class="callout">Only letters, numbers, 过渡并不会生效。这是因为 auto
underscores (_) and hyphens (-) allowed!</span> 是一个关键字，无法解析为一个
</label> 可动画的值。在这种场景下，可
以改为对 max-height 属性进行
过渡，并给这个属性指定一个足
够大的值来作为展示状态。

图 8-8
这个过渡动画最开始看起来是这
样的

触发这个提示框（.callout）所需要的 CSS 代码如下所示（我们在这
里略去了具体的外观和布局样式）：

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

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

目前，当用户聚焦到这个文本输入框时，会有一个半秒钟的过渡，如
图 8-8 所示。这个过渡没有什么问题，但如果它在结尾时能再夸张一点的
话，会显得更加自然和生动（比如说，先扩大到 110% 的尺寸，然后再缩回
100%）。我们可以把这个过渡改成一个动画，然后用上我们在前一段所学到
的东西：

@keyframes elastic-grow {
from { transform: scale(0); }
70% {
transform: scale(1.1);
animation-timing-function:
cubic-bezier(.1,.25,1,.25); /* 反向的ease */
}
}

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

42 缓动效果 201

඀ࠡ JOEC