最新消息:欢迎光临!

【转】JS监控css3动画

css3/html5 findever 1765浏览 0评论

我们已经知道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

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。
事件名 说明 冒泡 可撤销 上下文信息
animationstart 事件在动画开始时触发。
设置“animation-delay”时,触发在延迟之后。 Y N animationName
animationend 事件在动画结束后触发。 Y N animationName, elapsedTime
animationiteration 事件在’animation-iteration-count’大于1时才触发。 Y N animationName, elapsedTime
js事件绑定如下:
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地址

Transition 监控
Transition 可以监听事件是:transitionend。
事件名 说明 冒泡 可撤销 上下文信息
transitionend 事件在过渡结束后触发。 Y Y propertyName, elapsedTime
代码及事件绑定如下:
css
.box {
width: 100px;
height: 100px;
background:hotpink;
-webkit-transition:width 2s linear, height 3s linear;}

.change-size {
width: 300px;
height:300px;
}
html

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地址

支持情况
测试u3内核8.5以上都支持监控动画。
总结
动画事件的监控已有做了总结性的介绍,具体信息查看参考文献。
参考文献:
Transition Events on W3C
Animation EVents on W3C
transitionend on MDN
animationend on MDN
animationstart on MDN
animationiteration MDN

转载请注明:Findever » 【转】JS监控css3动画

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址