JS如何监控css3动画
2013-03-14 17:31
323 查看
摘要: 我们已经知道css3 transitions 可以让动画变得更简单和优雅, 而css3 keyframe animations 甚至可以完成复杂的细粒度的运动。 现大多主流浏览器支持transitions 和animation,这使得我们在项目中使用它们变得现实。 . ...
我们已经知道css3 transitions 可以让动画变得更简单和优雅, 而css3 keyframe animations 甚至可以完成复杂的细粒度的运动。 现大多主流浏览器支持transitions 和animation,这使得我们在项目中使用它们变得现实。 在本文中,我将讨论如何使用回调,让你更好的使用你的css3动画。 动画逻辑从js中分离先创建animation动画,让一个box变大,代码如下:css .box { width: 100px; height: 100px; background: hotpink; } @-webkit-keyframes growBox { to { width: 300px; height: 300px; } } .change-size { -webkit-animation: growBox 3s linear 1s 3 normal;} html <input type="button" id="button" value="点击我查看下面box的变化"/> <div id="box" class="box"></div> javascript var button = document.getElementById('button'), box = document.getElementById('box'), t1,t2; button.addEventListener('click', function (e) { box.classList.add('change-size'); }); 在这里,我们使用js来给动画元素添加指定的类,动画本身定义在css,它避免了脚本里到处是硬编码的css,实现分离逻辑。 Animation 监控Animatioin 可以监听三个事件,分别是:animationstart、animationend、animationiteration。
var button = document.getElementById('button'), box = document.getElementById('box'), t1,t2; button.addEventListener('click', function (e) { box.classList.add('change-size'); console.log('动画正在执行'); t1 = +new Date(); }); box.addEventListener("webkitAnimationStart", function (e) { console.log('动画开始了,当前经历的时间:' + e.elapsedTime + 's , 经历时间不包括延迟时间:' + (e.timeStamp - t1)/1000 + 's'); }); box.addEventListener("webkitAnimationIteration", function (e) { console.log('动画重复了一次,当前经历的时间:' + e.elapsedTime + 's') }); box.addEventListener("webkitAnimationEnd", function (e) { console.log('动画结束了当前经历的时间:' + e.elapsedTime + 's'); box.classList.remove('change-size'); }); 查看效果及日志如下: 点击我查看Demo地址 <img alt="animation日志" src="http://h5dev.uc.cn/data/attachment/portal/201302/28/112242cssu99hc7ou2o8gu.png" <="" div="" style="word-wrap: break-word; max-width: 620px;"> Transition 监控Transition 可以监听事件是:transitionend。
css .box { width: 100px; height: 100px; background:hotpink; -webkit-transition:width 2s linear, height 3s linear;} .change-size { width: 300px; height:300px; } html <input type="button" id="button" value="点击我查看下面box的变化"/> <div id="box" class="box"></div> javascript var button = document.getElementById('button'), box = document.getElementById('box'); button.addEventListener('click', function (e) { box.classList.add('change-size'); console.log('过渡正在执行'); }); box.addEventListener("webkitTransitionEnd", function (e) { console.log('过渡结束了,当前经历的时间:' + e.elapsedTime + 's'); }); 查看效果及日志如下: 点击我查看Demo地址 <img alt="transtion日志" src="http://h5dev.uc.cn/data/attachment/portal/201302/28/112242hdg5736465g6ddg1.png" <="" div="" style="word-wrap: break-word; max-width: 620px;"> 支持情况测试u3内核8.5以上都支持监控动画。总结动画事件的监控已有做了总结性的介绍,具体信息查看参考文献。参考文献:Transition Events on W3CAnimation EVents on W3C transitionend on MDN animationend on MDN animationstart on MDN animationiteration MDN |
相关文章推荐
- 用js触发CSS3-transition过渡动画
- Bounce.js-可视化CSS3动画代码生成js插件
- 如何使用CSS3的transition实现动画效果?
- 纯css3无js实现的Android Logo(有简单动画)
- SVG+JS path等值变化实现CSS3兴叹的图形动画
- css3动画引入prefixfree.js的优缺点
- js监听css3动画实现
- bounce.js:创建有趣的CSS3动画
- js结合css3动画
- 如何停止CSS3的动画?
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd
- CSS3和js炫酷点击按钮3D翻转动画特效
- 前端制作动画的几种方式(css3,js)
- CSS3 transform介绍|如何设计炫酷的动画效果
- 如何使用html5与css3完成google涂鸦动画
- 如何在React中使用CSS3动画
- Textillate.js – 实现动感的 CSS3 文本动画的简单插件
- 如何在Swiper内制作CSS3动画效果
- js(jquery)网页进度条加载n中办法和原理(也有css3动画进度条)
- HTML5+CSS3+JS学习笔记-13-CSS3过渡和CSS3动画