Heim > Web-Frontend > HTML-Tutorial > css动画回调 | Brizer's Blog_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-06-21 08:50:38
Original
1565 Leute haben es durchsucht

前言

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

css动画

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

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

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

@-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 */}
Nach dem Login kopieren

如何回调css动画

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

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

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

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

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

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

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

Verwandte Etiketten:
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage