标签：加载 set 而在 元素 回调 结束 定时 红色 就是
今天写一个css动画时遇到一个mini难题，记录如下：
1.需求：
等待元素A的动画加载完，再加载B元素的动画
2.初始思路：
在B元素的动画属性上加上delay(延迟，使得这个延迟时间 = A元素动画的加载时间)
即：animation : bmove 1s .4s 1; (这里的.4s即delay)
b的动画过程代码如下：
@keyframes bmove {
0% { opacity:0px; margin-top:300px }
70% { opacity:1px; }
100% { margin-top:0px }
}
出现bug：
因为需求是B元素也是渐入，即opacity 由 0 变到 1
如果把B的opacity设为0， 则动画结束后B又消失了；如果把B的opacity设为1，则delay之前B就出现了；这显然都是不符合需求的，这时候自然而然就想到一种JS方法
3.JS方法：
先把B的opacity设为0，然后待delay结束，用JS把B的opacity设为1 （用定时器实现，即setTimeout）
实现之后，在电脑上一切ok；然而在手机上运行时，出现了动画结束之后，B元素又闪了一下再出现的状况
状况原因猜想：
手机浏览器的js引擎相对css有延迟，导致动画结束后，setTimeout方法内的回调才执行，使得出现上述状况
既然这样，那就彻底放弃把JS融入动画控制中，因为不同浏览器js引擎差异
那怎么样能使opacity 一开始为0 一段时间之后变为1 呢？
4.优雅的delay方法：
成也delay，败也delay。如果这时候还绕在使用animation-delay属性上，那始终没有办法，所以干脆跳出delay怪圈，不使用delay！！！
那不使用delay如何办到delay的效果呢？
答案就是在animation的动画过程代码中自己加一段delay动画过程，话不多说，上代码：
@keyframes bmove {
0% { opacity:0px; margin-top:300px }
30% { opacity:0px; margin-top:300px }
80% { opacity:1px; }
100% { margin-top:0px }
}
红色部分代码即是手动delay代码，这时，既可以让B元素在delay期间不执行动画，又能让其初始状态和结束状态达到需求
标签：加载 set 而在 元素 回调 结束 定时 红色 就是
原文地址：https://www.cnblogs.com/codernie/p/8988215.html
