月度归档:2014年09月

推荐

每日推荐原创阅读:
【垂直对齐vertical-align的一些认识】 
http://t.cn/RhaWtPo
【七种情况下 This 的指向问题】 
http://t.cn/RhaWtPa
【jQuery Callback API】 
http://t.cn/RhaWtPC
【理解与使用Javascript中的回调函数】 
http://t.cn/8k7mlsj
【Vue.js 中文入门】
http://t.cn/8FO67P5
【图片主题色提取算法小结(Node.js 版)】
http://t.cn/RhSBGEW

每日推荐原创阅读:
【垂直对齐vertical-align的一些认识】 http://t.cn/RhaWtPo
【七种情况下 This 的指向问题】 http://t.cn/RhaWtPa
【jQuery Callback API】 http://t.cn/RhaWtPC
【理解与使用Javascript中的回调函数】 http://t.cn/8k7mlsj
【Vue.js 中文入门】http://t.cn/8FO67P5
【图片主题色提取算法小结(Node.js 版)】http://t.cn/RhSBGEW

css3动画事件—webkitAnimationEnd与计时器time事件

用css3的animation完成一个动画,当只有这个动画完成时才执行令一个事件,比如让动画保持在终止的状态或其他一些事件。我们该怎么办呢。 
第一种方法 
用计时器,设定一个和动画时长一样的time,过time事件去执行这个函数。 
setTimeout(function(){ },time); 
第二种方法 
当-webkit-animation动画结束时有一个webkitAnimationEnd事件,只要监听这个事件就可以了。 
例子: 

复制代码

代码如下:

<!DOCTYPE HTML>
<html>

<head>
<meta charset=”utf-8″>
<meta name=”author” content=”@my_programmer”>
<title>webkitAnimationEnd</title>
<meta name=”viewport” content=”width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”format-detection” content=”telephone=no” />
<style type=”text/css”>
#div {
width: 200px;
height: 200px;
background: #f60;
margin: 100px auto;
-webkit-transition: all ease 1s;
}
.change {
-webkit-animation: transform 1s 2 ease;
}
@-webkit-keyframes transform {
% {
-webkit-transform: scale(1)
}
% {
-webkit-transform: scale(2)
}
% {
-webkit-transform: scale(0.5)
}
% {
-webkit-transform: scale(1)
}
}
</style>
</head>

<body>
<div id=”div”></div>
<script type=”text/javascript”>
var tt = document.querySelector(‘#div’);
tt.addEventListener(“click”, function() {
this.className = ‘change';
}, false);
tt.addEventListener(“webkitAnimationEnd”, function() { //动画结束时事件
this.className = this.className.replace(‘change’, ‘ ‘);
console.log(2);
}, false);
</script>
</body>

</html>


拓展 
1、-webkit-animation动画其实有三个事件: 
开始事件 webkitAnimationStart 
结束事件 webkitAnimationEnd 
重复运动事件 webkitAnimationIteration 
你可以在上个例子中测试一下这两个事件 

复制代码

代码如下:

tt.addEventListener(“webkitAnimationStart”, function(){ //动画开始时事件 
console.log(1);//动画开始时,控制台输出1 
}, false); 
tt.addEventListener(“webkitAnimationIteration”, function(){ //动画重复运动时的事件 
console.log(3);//第一遍动作完成时,控制台输出3 
}, false); 


2、css3的过渡属性transition,在动画结束时,也存在结束的事件:webkitTransitionEnd; 
注意:transition,也仅仅有这一个事件。

JS如何监控css3动画

我们已经知道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 可以监听三个事件,分别是:animationstartanimationendanimationiteration

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

jquery事件绑定如下:

box.on("webkitAnimationStart", function (e) {
	console.log('动画开始了,当前经历的时间:' + e.elapsedTime + 's , 经历时间不包括延迟时间:' + (e.timeStamp - t1)/1000 + 's');
});

box.on("webkitAnimationIteration", function (e) {
	console.log('动画重复了一次,当前经历的时间:' + e.elapsedTime + 's')
});

box.on("webkitAnimationEnd", function (e) {
	console.log('动画结束了当前经历的时间:' + e.elapsedTime + 's');
  box.classList.remove('change-size');
});

查看效果及日志如下: 点击我查看Demo地址

animation日志

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');
});


支持情况

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

总结

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

参考文献: