Heim > Artikel > Web-Frontend > CSS3动画的回调处理_html/css_WEB-ITnose
CSS3动画的回调处理_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:52:39884Durchsuche
我们在做js动画的时候，很多时候都需要做回调处理，如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等，但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢？
CSS3动画也是可以做回调处理的，这里分为两个属性，一个是transition[w3c文档]，另外一个是animation[w3c文档]。
1、transition
对于transition，可以监听transitionend事件，当动画完成时触发，可以这样使用：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3-transitionend - BeyondWeb</title> <style> * {margin: 0; padding: 0;} .rect { width: 100px; height: 100px; background-color: #f80; -webkit-transition: all .5s; } </style> <script> window.onload = function () { var _rect = document.querySelector('.rect'); _rect.onclick = function () { _rect.style.webkitTransform = 'translateX(300px)'; } _rect.addEventListener('webkitTransitionEnd', function () { alert('动画执行完毕！'); // callback here }, false); } </script></head><body> <div class="rect"></div></body></html> 2、animation
对于animation我们可以监听animationend事件，示例代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3-animationend - BeyondWeb</title> <style> * {margin: 0; padding: 0;} .rect { position: relative; width: 100px; height: 100px; background-color: #f80; } @-webkit-keyframes move { from { -webkit-transform: rotate(0); } to { -webkit-transform: rotate(360deg); } } </style> <script> window.onload = function () { var _rect = document.querySelector('.rect'); _rect.onclick = function () { _rect.style.webkitAnimation = 'move 3s'; } _rect.addEventListener('webkitAnimationEnd', function () { alert('动画执行完毕！'); // callback here }, false); } </script></head><body> <div class="rect"></div></body></html> 以上就是关于CSS3动画回调处理的一些内容，最近在做H5页面时用到了，总结一下。
Stellungnahme：
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
Vorheriger Artikel：css之html选择器-shinepans_html/css_WEB-ITnoseNächster Artikel：一个让人恐怖的问题，关于图片的高宽_html/css_WEB-ITnose