webkitTransitionEnd事件与webkitAnimationEnd事件
因为需要监控CSS动画,需要在其动画之后对页面进行调整,便接触到了这两个事件。 WebKit引擎的浏览器中,当CSS 3的transition动画执行结束时,触发webkitTransitionEnd事件,当CSS 3的animation动画执行结束时,触发webkitAnimationEnd事件。所以我们可以通过监听这两个事件来得知当前动画的结束点。 一、webkitTransitionEnd<style type="text/css"> *{margin:0px;padding:0px;} div { width: 100px; height: 100px; background-color: pink; } #box { -webkit-transition: all 0.25s ease-in; } #box:hover { -webkit-transform: rotate(10deg); } </style> <div id="box"></div> document.getElementById('box').addEventListener('webkitTransitionEnd',function(event) { console.log('transition end'); },false); 鼠标移入,transition动画结束后,控制台输出了’transition end’,移出,transition动画结束后,也输出了’transition end’。 对上述css稍微改下,对hover伪类增加个样式: #box:hover { -webkit-transform: rotate(10deg); opacity: 0.6; } 鼠标移入且动画结束后,控制台上已经输出了两次’transition end’。所以说,webkitTransitionEnd事件将在元素的每个样式属性值发生改变之后触发一次。 二、webkitAnimationEnd在CSS 3中,可以通过使用keyframe样式属性与animation样式属性实现animation动画。 html不做修改,修改css以及js: div { width: 100px; height: 100px; background-color: pink; position: relative; -webkit-animation: mine 1s ease; } @-webkit-keyframes mine { from { left: 0px; } to { left: 200px; } } document.getElementById('box').addEventListener('webkitAnimationEnd',function(event) { console.log('animation end'); },false); 刷新进入页面,动画结束后,可以在控制台上看到’animation end’。 更改keyframe中的代码: @-webkit-keyframes mine { 0% { left: 0px; } 50% { left: 200px; } 100% { left: 0px; } } 两次animation移动,只触发了一次end事件。 三、兼容性在其他浏览器下,有些还是得加前缀的: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |