我有一系列需要对某些文本执行的动画效果,计划使用CSS3来实现。我的计划是让一些文本慢慢向下移动,并在到达屏幕的某个特定部分后,突出显示某些单词,最终文本会继续向下移动并消失以为接下来的文本腾出空间。
我的问题是,如何“链式”这些动画效果。我应该为向下移动、突出显示文本和向下移动其余部分分别设置不同的动画效果吗?然后,我应该设置延迟动画,只有前面的动画效果完成后才开始第二和第三个动画效果吗?我认为我可以创建将被链接在一起的不同动画效果,但不确定这些动画效果应该如何触发下一个动画效果开始。
有几种方法可以链接动画,其中纯CSS方式使用-webkit-animation-delay,您可以定义多个动画并告诉浏览器何时开始它们,例如:
-webkit-animation: First 1s, Second 2s;
-webkit-animation-delay: 0s, 1s;
/* or -moz etc.. instead of -webkit */
另一种方法是绑定动画结束事件,然后启动另一个动画。但我发现这种方法不太可靠。
$('#id')
.bind('webkitAnimationEnd',function(){ Animate2() })
.css('-webkit-animation','First 1s');
第三种方法是在Javascript中设置超时时间,并更改css动画属性。这是我最常使用的方法,因为它最灵活:您可以轻松更改时间、取消动画序列、添加新的不同动画序列,而且我从来没有像绑定transitionEnd事件那样出现过失败问题。
$('#id').css('-webkit-animation','First 1s');
window.setTimeout('Animate2("id")', 1000);
function Animate2....
在我看来,这需要的代码比绑定和CSS都要多,但它更可靠、更灵活。
当我在寻找与jQuery无关的方法时,我想到了链接的同样的想法,通过监听webKitanimationEnd事件,可以使用CSS进行过渡和动画的时间控制。
您可以创建一个队列数组,并将要动画化的元素添加到其中(使用一些选项,如效果和动画类型)。然后,通过在动画结束时转到下一个动画来处理此队列。这个动画可以是另一个元素,也可以是相同元素的后续动画。请记住,在动画结束时从className
中删除动画类。对于每个步骤,只需添加适当的CSS类,然后在动画完成后删除它们。由于我们监听animationEnd
,因此时间可以仅使用CSS完成,将处理留给JavaScript。
这是一个非常简单的任务,如果您的项目尚未使用像jQuery这样的库,那么您应该使用Vanilla JS。
我做了一些研究并设法组合出一些东西。请参见this fiddle以获取示例:
var manager = new AnimationManager();
manager.enqueue(animations).animate();
但它失败了。通过在启动下一个动画之前删除已完成过渡的类名来修复它!
setTimeout
不再可靠。输入1000
并不意味着它会在1 秒
内执行。这意味着它至少要等待1 秒
才能执行,之后如果有机会就会执行。这取决于事件循环中的内容。 - Loïc Faure-LacroixwebkitAnimationEnd
事件不可靠?如果可以,能否分享一些细节? - Telmo Marquesanimationend
可能会触发,因为某些内部动画已经完成,而不是在当前元素上。 - pery mimon