JS如何监控css3动画

最新推荐文章于 2024-01-23 19:30:15 发布

狼之血舞

最新推荐文章于 2024-01-23 19:30:15 发布

阅读量4.4k

点赞数

分类专栏：移动web

移动web 专栏收录该内容

122 篇文章 0 订阅

订阅专栏

摘要: 我们已经知道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。

事件名	说明	冒泡	可撤销	上下文信息
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

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

支持情况

测试u3内核8.5以上都支持监控动画。

总结

动画事件的监控已有做了总结性的介绍，具体信息查看参考文献。

参考文献：

狼之血舞

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS如何监控css3动画

摘要: 我们已经知道css3 transitions 可以让动画变得更简单和优雅, 而css3 keyframe animations 甚至可以完成复杂的细粒度的运动。现大多主流浏览器支持transitions 和animation，这使得我们在项目中使用它们变得现实。 . ...我们已经知道css3 transitions 可以让动画变得更简单和优雅
复制链接

扫一扫