V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
islujw
V2EX  ›  CSS

CSS 动画不会播放,直接显示目标结果。

  •  
  •   islujw · 2017-05-29 20:44:17 +08:00 · 3556 次点击
    这是一个创建于 2716 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 却有动画效果。

    是不是缺少了什么触发机制?完整实现这个动画的做法是?

    6 条回复    2017-05-30 11:39:18 +08:00
    wdhwg001
        1
    wdhwg001  
       2017-05-29 23:29:37 +08:00 via iPhone
    我记得 prefix 不能写在一条里的吧,而且 prefix 的有点迷,顺便不能排下版么
    dremy
        2
    dremy  
       2017-05-30 00:30:26 +08:00 via Android
    transition 是过度,animation 才是动画。
    前者是在相应属性发生变化时才触发过度效果,而后者可以直接播放动画效果
    islujw
        3
    islujw  
    OP
       2017-05-30 01:40:54 +08:00
    @wdhwg001 网页端是纯文本的,我已经换行了,但发出后被调整为连续的。
    islujw
        4
    islujw  
    OP
       2017-05-30 01:49:35 +08:00
    @dremy 明白了,谢谢。但在官网那段,没有搜索到那一条的任何 animation 代码,倒是其他条的有。
    linking
        5
    linking  
       2017-05-30 09:40:32 +08:00
    @islujw 用 js 动态添加变换后的 class 就可以看到动画效果了
    LevonLin
        6
    LevonLin  
       2017-05-30 11:39:18 +08:00 via Android
    transition 是过渡,动效要在元素属性变化(即 CSS 中匹配到新的选择器)后发生。一般通过指定 hover 等交互伪类,或 js 改变类名来实现过渡效果。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5039 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 03:56 · PVG 11:56 · LAX 19:56 · JFK 22:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.