原文:原生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. TypeError: Cannot read property &#39;style&#39; of null 错误解决

    错误信息例如以下: JSP代码例如以下: <c:if test ="${not empty excelErrors}"> <div id="excelE ...

  2. mongodb - 前端form表单数据传输，在保存和清除的数据格式的处理程序的 - 非递归

    //处理时间段,将ISODate("2014-10-09T18: 37: 50.0Z") 兑换 2014-10-09 18:37:50这样的格式 //截至处理6层树形结构数据,当多 ...

  3. Kubernetes初步

    Kubernetes是Google开源的容器集群管理系统.它构建于docker技术之上.为容器化的应用提供资源调度.部署执行.服务发现.扩容缩容等整一套功能.本质上可看作是基于容器技术的mini-Pa ...

  4. 调用WCF的异步方法

    原文:调用WCF的异步方法 AsyncCallback aLoginCallback = delegate(IAsyncResult result) { var aSystemUser = WcfCl ...

  5. 基于 Apache Mahout 构建社会化推荐引擎

    基于 Apache Mahout 构建社会化推荐引擎 http://www.ibm.com/developerworks/cn/views/java/libraryview.jsp 推荐引擎利用特殊的 ...

  6. java中HashMap在多线程环境下引起CPU100%的问题解决（转）

    最近项目中出现了Tomcat占用CPU100%的情况,原以为是代码中出现死循环,后台使用jstack做了dump,发现是系统中不合理使用HashMap导致出现了死循环(注意不是死锁). 产生这个死循环 ...

  7. PCB板蛇形走线有什么作用

    PCB板蛇形走线有什么作用  PCB上的不论什么一条走线在通过高频信号的情况下都会对该信号造成时延时,蛇形走线的主要作用是补偿"同一组相关"信号线中延时较小的部分,这些部分一般是没 ...

  8. Ice-2.1.2在RHEL Server 5.5上的安装

         因为项目的需要,服务器上的程序需要使用Ice接口与其它程序通信,对方提供了一个Windows版的工程,我要把它移植到Linux服务器上,既然Ice是跨平台跨语言的中间件,想来移植不是很困难, ...

  9. Linux渗透+SSH内网转发

    http://www.jb51.net/hack/58514.html http://blog.chinaunix.net/uid-756931-id-353243.html http://blog. ...

  10. HibernateReview Day1 - Introduction

    Hibernate已经学过去大概有半个月了,然后默默的忘掉了……所谓Practice makes perfect. 我尽力重新拾起来. 1.什么是ORM 在介绍Hibernate之前,我们先学习下OR ...