原文:原生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. UVa 1292 - Strategic game (树形dp)

    本文出自   http://blog.csdn.net/shuangde800 题目链接: 点击打开链接 题目大意 给定一棵树,选择尽量少的节点,使得每个没有选中的结点至少和一个已选结点相邻. 思路 ...

  2. SE 2014年4月29日

    交换网络中有vlan1 到20个vlan,要求使用MSTP技术实现vlan的负载分担. SW2为实例1(vlan1-vlan10)的主根,SW3为备根 SW3为实例2(vlan11-vlan20)的主 ...

  3. hdu 4961 Boring Sum（数学题）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4961 Problem Description Number theory is interesting ...

  4. 使用Visual Studio 寻找App性能瓶颈

    使用Visual Studio 寻找App性能瓶颈 最后更新日期:2014-05-05 阅读前提: 环境:Windows 8.1 64bit英文版,Visual Studio 2013 专业版Upda ...

  5. 【转向Javascript系列】从setTimeout说事件循环模型

    本文首发在alloyteam团队博客,链接地址http://www.alloyteam.com/2015/10/turning-to-javascript-series-from-settimeout ...

  6. Nagios+pnp4nagios+rrdtool 安装配置nagios（一）

    基于的软件版本 Apache-2.0.63  php-5.3.2 nagios-3.2.3  nagios-plugins-1.4.15  rrdtool-1.4.5 nrpe-2.12 pnp4na ...

  7. 作为一个.net程序猿,需要掌握这些有点前途的人才,一些开发---Shinepans

    1.基础 C#基础                    参考书目:   <c#入门经典>         <ASP.NET揭秘> IIS  HTML              ...

  8. [WPF]Binding的Converter和Validator

    不拘一格用数据的Converter 上篇文已经说明,Binding就是数据源与目标之间的“关联”.大多数情况下,数据从Source到Target以及从Target返回Source都是“直来直去”的,但 ...

  9. Unity3D 游戏开发架构篇 ——性格一流的设计和持久性

    在游戏开发.游戏人物占了非常大的空间.所有内容都是由主角可以说游戏驱动. 下面来介绍一下一流的设计和持久性的作用. 一.应用场景 游戏中的角色类型不一而足,有不同的技能.有不同的属性等等.有些一个玩家 ...

  10. crontab，想说爱你不easy

    悲剧的背景 跑自己主动化脚本的机器连不上toastserver了, 仅仅能自己写个脚本每天跑了. 当然要放在crontab里了. 5 3 * * * sh ~/nosecron.sh 更悲剧的结果 第 ...