本文实例讲述了原生JS检测CSS3动画是否结束的方法。分享给大家供大家参考，具体如下：
不知道大家在做网页的时候有没有碰到这种情况：当你使用CSS3的动画属性时，想要在动画结束后添加一系列操作，但往往这些操作可能会发生在与动画同时出现或者是在动画还没结束时就发生了。
针对这种情况我们会使用js来监听动画是否结束即它的style的transition属性是否为transitionend;下面我们通过一个简单的例子来理解一下我这句话的含义：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>通过原生js检测CSS3的动画结束</title>
<style>
*{padding: 0;margin: 0;}
.test{
width: 200px;
height: 200px;
border: 1px soli black;
background: red;
transition-property:width;
transition-duration: 3s;
}
/* 动画 */
.test.move{
width:600px;
}
button{
width: 80px;
height: 25px;
font-size: 16px;
text-align: center;
line-height: 25px;
}
</style>
</head>
<body>
<div class="test" id="main">
</div>
<button id="play">开始运动</button>
</body>
<script>
// 示例动画主要是改变div的宽度
// 主要是通过检测transition的值是否为transitionend
function init() {
var main = document.getElementById('main');
var play = document.getElementById('play');
var test = document.getElementsByClassName('test')[0];
// 兼容性写法
transitions = {
// 兼容IE
'transition': 'transitionend',
// 兼容Opera
'OTransition': 'oTransitionEnd',
// 兼容Firefox
'MozTransition': 'transitionend',
// 兼容Google
'WebkitTransition': 'webkitTransitionEnd'
};
function getTransitions() {
var t;
for (t in transitions) {
// t即transition，OTransition，MozTransition，WebkitTransition
if (main.style[t] !== undefined) {
return transitions[t];
}
}
}
// 按钮添加click事件
play.onclick = function () {
main.classList.add('move');
};
// 接收返回的当前浏览器的transition的值
var setTransitions = getTransitions();
// 添加监听事件
setTransitions && main.addEventListener(setTransitions,function (params) {
alert('动画结束');
// 删除类名move
main.classList.remove('move');
},false)
}
init();
</script>
</html>
效果如下：
可以看到当动画结束时才弹出弹框可以验证方法的可行性。
最后提一下，这个方法仍存在一些问题，比如你改变两个属性：宽度和高度，可能就会触发这个方法两次或者多次，所以使用的时候要注意一下。
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.kunjuke.com/code/HtmlJsRun测试一下运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
- javascript判断css3动画结束 css3动画结束的回调函数
- javascript与css3动画结合使用小结
- 原生javascript+css3编写的3D魔方动画旋扭特效
- 用Move.js配合创建CSS3动画的入门指引
- JS判断页面加载状态以及添加遮罩和缓冲动画的代码
- 深入探究使JavaScript动画流畅的一些方法
- JS+CSS实现网页加载中的动画效果
- js动画(animate)简单引擎代码示例
- JS简单实现动画弹出层效果
