在 https://www.apple.com/switch/ 页面的第七点理由「 Can I get help from a real person?」区块,有一个「向上放大淡入的 Notifications 」动画。
官网用的形状是一张 .png 图片。自己用 CSS 写出图形后,按官网的 CSS 动画添加尝试了一下,结果网页直接呈现动画结束后的目标形态,而没有任何动画播放过程。其中核心部分是(适配用的动画代码和其他样式都加了):
.变换 { transform: translateY(-70%) scale(0.9); transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s, opacity 0.45s ease-out 0.4s, -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s; opacity: 0; }
.变换.后 { transform: translateY(-140%) scale(1); opacity: 1; }
然后将上述两个作为 class 加入 div。网页直接显示结果,无动画过程。然而在 Safari 网页检查器中,手动反复取消/勾选 transform 却有动画效果。
是不是缺少了什么触发机制?完整实现这个动画的做法是?
1
wdhwg001 2017-05-29 23:29:37 +08:00 via iPhone
我记得 prefix 不能写在一条里的吧,而且 prefix 的有点迷,顺便不能排下版么
|
2
dremy 2017-05-30 00:30:26 +08:00 via Android
transition 是过度,animation 才是动画。
前者是在相应属性发生变化时才触发过度效果,而后者可以直接播放动画效果 |
6
LevonLin 2017-05-30 11:39:18 +08:00 via Android
transition 是过渡,动效要在元素属性变化(即 CSS 中匹配到新的选择器)后发生。一般通过指定 hover 等交互伪类,或 js 改变类名来实现过渡效果。
|