原生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程序设计有所帮助。
相关文章
这篇文章主要介绍了webpack proxy 使用(代理的使用)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
基于BootstrapValidator的Form表单验证(24)
这篇文章主要为大家详细介绍了基于BootstrapValidator的Form表验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了JS Date时间格式化的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
本文详细讲解了JS截取字符串的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-02-02
easycom是uniapp的一种组件自动引入的规则,使用这种规则可以使满足规则的组件无需注册直接使用,下面这篇文章主要给大家介绍了关于uniapp中如何使用easycom自定义组件的相关资料,需要的朋友可以参考下2023-05-05
在本篇文章里小编给大家分享了关于JavaScript禁用右键单击优缺点分析，有需要的朋友们学习下。2019-01-01
js实现的点击超链显示隐藏层...2007-05-05
这篇文章主要介绍了js实现鼠标划过给div加透明度的方法,涉及javascript动态操作页面元素属性的相关技巧,该方法可兼容火狐与IE浏览器,需要的朋友可以参考下2015-05-05
在页面中循环添加到select中，但是在ie8中就一直提示 缺少id未定义，经测试发现数组的最后多了个逗号，把逗号去掉就好了2014-03-03
这篇文章主要为大家详细介绍了手机端js和html5刮刮卡效果，刮开之后是随机生成的8位码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
最新评论