优雅地实现CSS Animation delay-阿里云开发者社区

开发者社区> 聂雄> 正文

优雅地实现CSS Animation delay

简介: 1.需求:   等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片)   先来看下最后的效果啦: 2.初始思路:   在B元素的动画属性上加上delay(延迟,使得这个延迟时间 = A元素动画的加载时间) 即:animation : bmove .
+关注继续查看

1.需求:

  等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片)

  先来看下最后的效果啦:

2.初始思路:

  在B元素的动画属性上加上delay(延迟,使得这个延迟时间 = A元素动画的加载时间)

即:animation : bmove .7s .7s 1; (这里的第二个.7s即delay时间0.7秒)

  b的动画过程代码如下:

@keyframes bmove {

    0% { margin-top: 100%; opacity: 0 }

    100% { margin-top: 0%;opacity: 1 }

  }

  出现bug:

可以明显看出B元素在A做动画时就已经出现,这显然是不符合需求的;而其原因就是在B元素delay的过程中一直会处在画面中,而不是在画面外等着入场,从这里我们也更能理解animation的暗藏含义:即动画前和动画后没有变化。(这就像你把脉动装进了可乐的瓶子里,脉动依旧还是脉动,而不是因此就变可乐了),那怎么样才能使B元素在A做动画时不要显示出来呢?怎么样才能使其乖乖地先呆在画面之外呢?

  很自然地,想到了将其opacity设为0,不过单单这样,动画之后它又要消失了,效果见下图:

再一次证明了animation的暗藏含义:即动画前和动画后没有变化

这个时候自然地想到在动画后再利用javascript将其opacity设为1,那这样是不是就能高枕无忧了呢?先试试看

3.JS方法:

  先把B的opacity设为0,然后待delay结束,用JS把B的opacity设为1 (用定时器实现,即setTimeout)

  实现之后,在电脑上一切ok;然而在手机上运行时,出现了动画结束之后,B元素又闪了一下再出现的状况(由于手机不方便录制gif,所以这里就没放图了,大家自行脑补,哈哈)

  状况原因猜想:

    手机浏览器的js引擎相对css有延迟,导致动画结束后,setTimeout方法内的回调才执行,使得出现上述状况

  既然这样,那就彻底放弃把JS融入动画控制中,因为不同浏览器js引擎差异

  那怎么样能使opacity 一开始为0 一段时间之后变为1 呢?

4.优雅的delay方法:

成也delay,败也delay。如果这时候还绕在使用animation-delay属性上,那始终没有办法,所以干脆跳出delay怪圈,不使用delay!!!

  那不使用delay如何办到delay的效果呢?

答案就是在animation的动画过程代码中自己加一段delay动画过程,话不多说,上代码:

  @keyframes bmove {

0% { margin-top: 100%; opacity: 0 }

50% { margin-top: 100%; opacity: 0 }

    100% { margin-top: 0%;opacity: 1 }

  }

  红色部分代码即是手动delay代码,这时,既可以让B元素在delay期间不执行动画,又能让其初始状态和结束状态达到需求,这个时候我们的需求就完美实现啦:

本文可转载,但请附上作者昵称(大雄的学习人生)及原文链接哦

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
01_spring_ 简介| 学习笔记
快速学习01_spring_ 简介
10 0
Django框架介绍与安装
软件框架就是为实现或完成某种软件开发时,提供了一些基础的软件产品, 框架的功能类似于基础设施,提供并实现最为基础的软件架构和体系 通常情况下我们依据框架来实现更为复杂的业务程序开发 二个字,框架就是程序的骨架
5 0
学习vue3之路day1
学习vue3之路day1
18 0
学习vue3之路day2
学习vue3之路day2
6 0
xshell+阿里云linux+vue+mysql开发练习
这篇文章记录了我在阿里云进行Linux基础学习的过程,以及根据阿里云进行一些简单的开发实践。
8 0
jquery获取多个相同name的input的value值
jquery获取多个相同name的input的value值
10 0
Nginx-基本概念和使用
Nginx-基本概念和使用
10 0
学习vue3之路day3
学习vue3之路day3
6 0
飞天加速计划·高校学生在家实践
我用阿里云服务器的一些心得
17 0
+关注
聂雄
原材料专业小硕一枚,一年前端从业经验,目前主学机器学习方向。
14
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载