原文:原生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 onclick="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 动画结束的回调函数的更多相关文章

  1. JS判断语句 注意多句时加大括号 回调函数LODOP兼顾写法

    由于C-LODOP获取一些动作函数的返回值,需要用回调函数,由于常见的使用方法是混合部署,也就是同一个页面,根据浏览器的不同,可能会走LODOP ,也可能会走C-LODOP,因此写法要坚固两种,而有些 ...

  2. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  3. 原生js使用getComputedStyle方法获取CSS内部属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式, 1.下面的方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style ...

  4. 原生JS判断密码强弱

    前些天工作中有这个需求,自己手写了相关的JS代码,第一种方法是通过ASCII 码判断密码类型,完成用户注册时判断用户输入密码的强度,分强.弱.中三等级,它可以根据用户输入的密码显示对应的密码强弱等级, ...

  5. 【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束

    引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为 ...

  6. 原生JS+ CSS3创建loading加载动画；

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

  7. 使用原生js来控制、修改CSS伪元素的方法总汇, 例如:before和:after

    在网页中,如果需要使用辅助性/装饰性的内容的时候,我们不应该直接写在HTML中,这样会影响真正的内容,这就需要使用伪元素了,这是由于css的纯粹语义化是没有意义的.在使用伪元素的时候,会发现js并不真 ...

  8. 利用原生JS判断组合键

    <script type="text/javascript"> var isAlt = 0; var isEnt = 0; document.onkeydown = f ...

  9. js判断类型为数字的方法实现总汇——原生js判断isNumber()

    方法一[推荐]: 最容易想到的是用typeof来判断是否是number类型 ,但是如果为NaN会被认为也是number类型,因此我们需要使用isNaN来排除NaN的情况. function isNum ...

随机推荐

  1. 32位Linux文件限制大小

    线上程序不断重新启动,查看log发现是进程由于SIGXFSZ信号退出.对过大的文件进行操作的时候会产生此信号,一般仅仅在32位机器上出现,文件限制大小为2G.用lsof查看进程打开的文件,果然有一个文 ...

  2. POJ 1703：Find them, Catch them（并用正确的设置检查）

    Find them, Catch them Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 30702   Accepted: ...

  3. RequireJS学习资料

    RequireJS学习资料汇总   入门系列 [1]阮一峰 RequireJS用法 [2]RequireJS入门指南 文档系列 [1]RequireJS中文文档 [2]RequireJS英文文档 代码 ...

  4. java使用AES加密解密 AES-128-ECB加密

    java使用AES加密解密 AES-128-ECB加密 import javax.crypto.Cipher; import javax.crypto.spec.SecretKeySpec; impo ...

  5. Resource temporarily unavailable用户的连接数设置的太小

    -bash:fork:Resource temporarily unavailable的问题   出现这个问题的原因是linux用户的连接数设置的太小,只要修改max user processes就可 ...

  6. 【JAVA得知】struts2 于 Actionsupport 任务

    尊重原创:http://xumiao900.iteye.com/blog/469760     Action 跟 Actionsupport 的差别      当我们在写action的时候,能够实现A ...

  7. 实现Timeline

    Redis实现Timeline 上回写了使用Redis实现关注关系,这次说说使用Redis实现Timeline. Timeline的实现一般有推模式.拉模式.推拉结合这几种.推模式:某人发布内容之后推 ...

  8. pygame写的弹力球

    这是pygame写的弹力球 运行效果: ======================================================== 代码部分: ================= ...

  9. Java虚拟机几个命令行参数说明

    一.运行class文件 执行带main方法的class文件,Java虚拟机命令参数行为: java <CLASS文件名> 注意:CLASS文件名不要带文件后缀.class 例如: java ...

  10. hdu 4472 Count （递推）

    Count Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...