原生js判断css动画结束 css 动画结束的回调函数

原文:原生js判断css动画结束 css 动画结束的回调函数

css3 的时代，css3--动画一切皆有可能；

传统的js 可以通过回调函数判断动画是否结束；即使是采用CSS技术生成动画效果，JavaScript仍然能捕获动画或变换的结束事件；

transitionend事件和animationend事件标准的浏览器事件，但在WebKit浏览器里你仍然需要使用webkit前缀，所以，我们不得不根据各种浏览器分别检测事件

  var transitions = {'transition':'transitionend','OTransition':'oTransitionEnd','MozTransition':'transitionend','WebkitTransition':'webkitTransitionEnd'}

下面附上源代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>suface   js判断css动画是否结束</title>
</head><body><p>一旦动画或变换结束，回调函数就会触发。不再需要大型类库支持。<br> http://www.webhek.com/css-animation-callback/    来源于web骇客</p>
<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: .5s;*/
transition-duration:3s;}.sample.hide {
opacity: 0;
}
</style>
<div class="sample">css3动画过度慢慢隐藏（transition-duration:3s;）</div>
<p><button οnclick="this.style.display='none';startFade();">慢慢消退，检测结束事件</button></p>
<script>             (function() {var e = document.getElementsByClassName('sample')[0];function whichTransitionEvent(){var t;var el = document.createElement('fakeelement');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';}})();</script>
</body>
</html>

原生js判断css动画结束 css 动画结束的回调函数相关推荐

原生js判断iPhoneX系列手机型号
#原生js判断iPhoneX系列手机型号 static isIphone() {return /iphone/gi.test(window.navigator.userAgent)}static is ...
html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...
vue 判断字符串是否是英文_vue rules以及原生js判断字符串是否为正整数(正小数)...
1.在vue中使用rules形式进行校验 1.首先在vue文件的methods()中添加校验方法,这里校验方法命名为isNumber用自带的.test方法进行正则校验 methods: { isNu ...
js判断数据类型（如数组）及数组操作函数
在ES5的时候,js数据类型有6种:Number.String.Boolean.undefined.object.Null. 注:https://blog.csdn.net/u013592575/ar ...
原生js瀑布流效果，css+html+js，复制下来可直接使用
html里面总共需要引入三个文件 css文件两个,js代码一个 :::json文件里面的图片就自己增改把 html页面 <div class="container" id=& ...
blr不是已知的css属性名,js判断并告知支持css属性（值）的何种情况
前言当我们想用某个css新特性时,总是会在意它的兼容性情况,或许我们会去搜索它的兼容性,哪些浏览器合适哪些不合适,在这些已知的情况下再选择是不是使用或如何使用,这是一个已知我们即将用于什么浏览器下作 ...
js判断类型为数字的方法实现总汇——原生js判断isNumber()
方法一[推荐]: 最容易想到的是用typeof来判断是否是number类型 ,但是如果为NaN会被认为也是number类型,因此我们需要使用isNaN来排除NaN的情况. function isNum ...
原生js判断IE浏览器版本
// 判断IE浏览器版本function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE ...
用原生JS判断页面是否滑动到底部
window.onscroll=function(){//变量scrollTop是滚动条滚动时,滚动条上端距离顶部的距离var scrollTop = document.documentElement ...

原生js判断css动画结束 css 动画结束的回调函数

原生js判断css动画结束 css 动画结束的回调函数相关推荐

最新文章

热门文章