原生JS检测CSS3动画是否结束的方法详解
更新时间：2019年01月27日 09:55:04 作者：Cairo960918
这篇文章主要介绍了原生JS检测CSS3动画是否结束的方法,结合实例形式分析了javascript事件响应及针对css3属性检测相关操作技巧,需要的朋友可以参考下
本文实例讲述了原生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.jb51.net/code/HtmlJsRun测试一下运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要介绍了JS使用数组实现的队列功能,结合实例形式分析了javascript基于数组的队列定义、元素添加、读取等相关操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了js倒计时简单实现方法，方便一些提示重要日期的来临，本实例特别适合用于商品倒计时抢购活动，感兴趣的小伙伴们可以参考一下2015-12-12
在JavaScript中,我们可以通过多种方法来判断一个数组中是否包含某个特定的值,这篇文章主要给大家介绍了关于如何查找JS对象中是否包含某个变量的6种方法,需要的朋友可以参考下2024-08-08
js高亮效果实现代码，直接静态页面即可，不用每次都要生成2008-09-09
web前端开发过程中调试是一个不可避免的过程，我们有众多的浏览器可供选择，但是如果您要调试的平台浏览器不是那么先进呢2010-12-12
本文将探讨实用的 JavaScript 文件优化技术、如何处理与 JavaScript 文件相关的性能问题以及帮助优化过程的工具,你将获得提升web应用程序速度的相关知识,从而为你的用户提供无缝体验2023-12-12
这篇文章主要为大家详细介绍了如何利用css+原生js制作简单的钟表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了弱类型语言javascript中 a,b 的运算,结合实例形式总结分析了js闭包函数中布尔值与字符串的a，b运算相关操作技巧,需要的朋友可以参考下2019-08-08
这篇文章主要为大家详细介绍了微信小程序实现手风琴折叠面板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
javascript 冒泡排序 正序和倒序实现代码，需要的朋友可以参考下。2010-12-12
最新评论