js检测css3动画是否执行完毕代码实例
由于硬件的进步,现在css3虽然说不上已经达到普及的程度,起码也可以说应用已经非常广泛。
css3能够实现流畅的动画效果,在实际应用中可能需要有这样的效果,那就是能够检测动画执行完毕进而执行相应的代码。
代码实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/" />
<title>实例</title>
<style type="text/css">
.sample{
width:200px;
height:200px;
border:1px solid green;
background:lightgreen;
opacity:1;
margin-bottom:20px;
transition-property:opacity;
transition-duration:3s;
}
.sample.hide{
opacity:0;
}
</style>
<script>
window.onload=function(){
var obt=document.getElementById("bt");
(function() {
var e=document.getElementsByClassName('sample')[0];
function whichTransitionEvent(){
var t;
var el=document.createElement('antzone');
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
}
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
alert('css3动画结束');
});
startFade = function() {
e.className+= ' hide';
}
})();
obt.onclick=function(){
this.style.display='none';
startFade();
}
}
</script>
</head>
<body>
<div class="sample"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
上面的代码实现了我们的要求,下面介绍一下他的实现过程。
一.代码注释:
(1).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。(2).var obt=document.getElementById("bt"),获取id属性值为bt的元素对象,这里就是按钮。
(3).(function() {})()一个匿名自执行函数。
(4).var e=document.getElementsByClassName('sample')[0],获取class属性值为sample集合中的第一个元素。
(5).function whichTransitionEvent(){},此函数实现f返回对象的事件名称。
(6).var t,声明一个变量,会在后来的for循环中使用。
(7) .var el=document.createElement('antzone'),创建一个元素对象。
(8).var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
},此对象直接量中存储的是对应的事件名称,大家可能都知道由于浏览器的兼容问题css3的属性可能需要在属性前面加上浏览器的标志,比如-webkit-transform-style或者-moz-transform-style等,这里的动画事件transitionend也是如此。
(9).for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
},前面创建的el元素其实就是用来检测支持何种形式的transitionend事件,找出对应的然后返回。
(10).var transitionEvent = whichTransitionEvent(),返回事件名称。
(11).transitionEvent && e.addEventListener(transitionEvent, function() {
alert('css3动画结束');
}),注册事件处理函数。
(12).startFade = function() {
e.className+= ' hide';
},此函数可以为元素再添加一个class样式类,新添加的样式类可以设置元素透明度为0。
(1).getElementsByClassName()方法可以参阅getElementsByClassName()一章节。
(2).document.createElement()方法可以参阅document.createElement()一章节。
(3).addEventListener()方法可以参阅addEventListener()一章节。
(4).className可以参阅js className一章节。
(5).transitionend事件可以参阅javascript transitionend事件一章节。
相关推荐
-
javascript获取函数定义的参数个数
在实际应用中可能获取一个函数定义的参数个数,也就是形参的数目。代码实例如下:function func(,b){ vr num; rturn num=+b;}consol.log(fun
-
JavaScript函数体代码
实际应用中,可能需要通过一个函数的名字来获取函数体。下面通过代码实例介绍一下如何实现此功能。代码实例如下:function func(,b){ vr num; rturn num=+b;}
-
jQuery 隐藏具有指定class属性值的元素
本章节分享一段代码实例,它实现了隐藏具有指定clss属性值的元素。代码如下:
-
点击实现隐藏元素本身代码实例
本章节分享一段代码实例,它实现了点击隐藏元素本身的效果。代码实例如下uth
-
点击按钮实现隐藏一个元素代码实例
本章节分享一段代码实例,它实现了点击一个按钮隐藏指定元素的功能。代码实例如下