原文:原生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. malloc函数的一种简单的原理性实现

    malloc()是C语言中动态存储管理的一组标准库函数之一.其作用是在内存的动态存储区中分配一个长度为size的连续空间.其参数是一个无符号整形数,返回值是一个指向所分配的连续存储域的起始地址的指针 ...

  2. BaiduMap_SDK_DEMO_3.0.0_for_Xamarin.Android_by_imknown

    2.4.2 已稳定, 同一时候已经放置到分支/Release 2.4.2了. 3.0.0 已开发完毕, 可是不推荐大家用于项目中, 请观望或者自己进一步调试. 个人感觉尽管3.0.0简化了开发, 可是 ...

  3. 全面剖析Redis Cluster原理和应用 （转）

    1.Redis Cluster总览 1.1 设计原则和初衷 在官方文档Cluster Spec中,作者详细介绍了Redis集群为什么要设计成现在的样子.最核心的目标有三个: 性能:这是Redis赖以生 ...

  4. [置顶] hdu 4699 2个栈维护 or 伸展树

    hdu 4699  Editor 题意:对一个数列进行操作,光标位置后面插入一个权值为x的数,删除光标前的那个数,光标左移一位,光标右移一位,求到k位置的最大的前缀和.. 注意这里的k是在光标之前的, ...

  5. spring 普通类获取四大作用域request、applicationContext、session、page

    几乎所有web应用容器都提供了四种类似Map的结构:application session request page,Jsp或者Servlet通过向着这四个对象放入数据,从而实现Jsp和Servlet ...

  6. GIT分支管理是一门艺术(转)

    英文原文:http://www.nvie.com/posts/a-successful-git-branching-model/ 原文作者:Vincent Driessen 本文经Linux大棚博主总 ...

  7. U9文件与文件系统的压缩和打包

    1.在Linux的环境中,压缩文件的扩展名大多为:*.tar,*.tar.gz,*.tgz,*.bz2. 2.gzip可以说是应用最广的压缩命令了．目前gzip可以揭开compress,zip和gzi ...

  8. Quartz时间配置

    格式: [秒] [分] [小时] [日] [月] [周] [年]  序号 说明  是否必填  允许填写的值 允许的通配符  1  秒  是  0-59    , - * /  2  分  是  0-5 ...

  9. 自定义ComboBox，简简单单实现

    private void Button_Click(object sender, RoutedEventArgs e) { Popup1.PlacementTarget = TesTextBox; P ...

  10. 分解XML方法

    分解XML方法 1.DOM生成和解析XML 2.SAX生成和解析XML 3.DOM4J生成和解析XML 4.JDOM生成和解析XML 版权声明:本文博主原创文章.博客,未经同意不得转载.