原文:原生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. Java 小样例：图书馆课程设计（Java 8 版）

    用 Java 模拟一个图书馆.包含创建图书.创建读者.借书.还书.列出全部图书.列出全部读者.列出已借出的图书.列出过期未还的图书等功能. 每一个读者最多仅仅能借 3 本书,每一个书最多仅仅能借 3 ...

  2. Jedis Client的使用以及序列化

    JedisPool pool = new JedisPool(poolConfig, IP, PORT, timeout); public String set(String key,String v ...

  3. Knockout应用开发指南 第九章：高级应用举例

    原文:Knockout应用开发指南 第九章:高级应用举例 1   Contacts editor 这个例子和微软为演示jQuery Data Linking Proposal例子提供的例子一样的提供的 ...

  4. Java 实现二分(折半)插入排序

    设有一个序列a[0],a[1]...a[n];当中a[i-1]前是已经有序的,当插入时a[i]时,利用二分法搜索a[i]插入的位置 效率:O(N^2),对于初始基本有序的序列,效率上不如直接插入排序: ...

  5. linux下mysql数据的导出和导入

    导出整个数据库中的全部数据 1.在linux命令行下输入: mysqldump -u userName -p dabaseName > fileName.sql fileName.sql最好加上 ...

  6. arcgis jsapi 调用google地区服务

    做地理信息系统(GIS)项目,除了实现功能用户体验度要好之外,最重要的是地图渲染效果更要好.很多时候苦于数据的完整性和对于配图的审美观,程序猿们都很难配出好看的地图效果.基于上述一般直接调用googl ...

  7. java整合flex

    java+flex项目整合 评论0   字号:大中小 订阅 第一种:javaproject和flexproject独立 这样的方式也是非常多人使用的方式.flex程序猿和java程序猿相互独立的工作. ...

  8. POJ 1182 ：食物链（并查集）

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 43526   Accepted: 12679 Description ...

  9. restrictkeyword

    今天在移植ffmpeg到opencore时出现一个编译错误: /libavcodec/dsputil.c:545: error: expected ';', ',' or ')' before 'bl ...

  10. hdu1513 （滚动数据压缩空间）

    给定一个字符串,问最少添加多少个字符可以使得这个字符串变成回文串 if(str[i]==str[j]) dp[i][j] = dp[i+1][j-1] else dp[i][j] = min(dp[i ...