css动画回调 | Brizer's Blog_html/css_WEB-ITnose-HTML Tutorial-php.cn

css动画回调 | Brizer's Blog_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 08:50:38

Original

1543 people have browsed it

前言

传递的javascript式动画，可以很容易地通过回调函数来实现动画完成后做什么，而css3动画则不好通过javascript来回调。如何解决这个问题呢？

css动画

css动画我以前在文章中提到过。这里写几个基本用法，第一种是简单的变换，使用transform即可：

.mydiv {    width:100px;    height:100px;    background:red;    -webkit-transition: all 2s;}.newClass {    -webkit-transform: translateY(100px)}

Copy after login

第二种是复杂一点，需要自己定义帧的状态：

@-webkit-keyframes mymove {    from {top:0px;}    to {top:200px;}}.mydiv {    width:100px;    height:100px;    background:red;    position:relative;    -webkit-animation:mymove 2s forwards; /* Safari and Chrome */}

Copy after login

如何回调css动画

回到一开始提出的问题，我们如何回调。

一种最基本的想法就是我们知道了动画的时间，那么可以通过延时来模拟回调：

//css中代码可以看到动画持续2svar delay = 2000;setTimeout(function(){    dosomething()}, delay);

Copy after login

但是只要深入理解一点就知道setTimeout并不可靠，而且这么写可拓展性也太差了。

那么解决办法就是通过新的事件transitionEnd和animationend：

document.getElementById('my').addEventListener('transitionEnd', function(){    alert('Transform animation has done!');});document.getElementById('my').addEventListener('animationend', function(){    alert('Animation has done!....');});

Copy after login

这样就简单了。当然还有animationstart,animationiteration等事件，这里就不一一介绍了。