弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬_┬)看来还是要再接再励啊w(゚Д゚)w

言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transitionend事件和animationend事件,如果我们需要在动画执行完毕后,

进行一些其他操作,只需要给这两个事件添加相应的回调函数即可.

如果你css基础不够,请看这里: 张鑫大大关于css3动画的简介

如果你向深入研究这个问题,请看这里:蜗牛大大讲transition事件处理

值得注意的是当transition动画修改了元素的N个属性值时,就会触发N次transitionend事件,因此需要定义一个handleTransitionEndfn函数来处理多次触发的问题,

代码如下:

var handleTransitionEndfn=function(ele,fn,duration){
var flag=0;
//每次触发transitionend事件都会执行callback()
var callback=function(){
fn();
flag=1;
}
ele.addEventListener("webkitTransitionEnd", function(){
callback();
//防止winphone不能触发事件
setTimeout(callback(), duration);
}, false)
}

下面是transition回调处理的示例:

html结构:

<div class="trans_box"></div>

css样式:

<style>
*{
margin:0;
padding:0;
}
.trans_box{
width: 100px;
height: 100px;
margin:100px;
background-color:orange;
-webkit-transition:all 1s ease-out;
}
</style>

js代码:

<script type="text/javascript">
window.onload=function(){
var trans_box=document.querySelector(".trans_box");
trans_box.onclick=function(){
trans_box.style.backgroundColor="pink";
trans_box.style.webkitTransform="translateX(200px) scale(2) rotate(360deg)";
}
var handleTransitionEndfn=function(ele,fn,duration){
var flag=0;
// 当transition事件完成后需要执行的函数;
var callback=function(){
if(!flag){
fn();
flag=1
}
};
ele.addEventListener("webkitTransitionEnd", function(){
callback();
// 考虑兼容winphone
setTimeout(callback, duration);
},false) };
function transitionEndfn(){
alert("transition事件成功加载!")
}
handleTransitionEndfn(trans_box,transitionEndfn,"2s");
}
</script>

下面animation回调处理示例:

html结构同上下

css样式如下:

<style>
*{
padding:0;
margin:0;
}
.anim_box{
width: 100px;
height: 100px;
background-color: lightgreen;
margin:100px;
transition:all 2s ease;
}
@keyframes move{
0%{
opacity: 1;
}
50%{
opacity: 0.8;
-webkit-transform:rotate(360deg);
}
100%{
background-color: pink;
opacity: 0.3;
}
}
</style>

js代码:

<script>
var anim_box=document.querySelector(".anim_box");
anim_box.onclick=function(){
anim_box.style.webkitAnimation="move 2s";
}
anim_box.addEventListener("webkitAnimationEnd", function(){
alert("animation事件加载成功!")
}, false)
</script>

css3中transition和animation的回调处理的更多相关文章

  1. 弄清 CSS3 的 transition 和 animation

    弄清 CSS3 的 transition 和 animation transition transition 属性是 transition-property, transition-duration, ...

  2. CSS3动画 transition和animation的用法和区别

    transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C   IE  -ms-  Chrome/Safari -webkit-   Firefoc - ...

  3. 2018年1月17日总结 css3里transition 和animation 区别

    transition 和animation两个CSS3属性经常被用到实际项目中,想把它整理出来. 1.先介绍transition >>>>>  a. 在做项目中经常会遇见 ...

  4. css3中transition属性详解

    css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...

  5. Vue中transition和animation的使用

    一:二者的对比 1.动画循环就用animation.在animation中有一个animation-iteration-count属性可以定义循环次数.transition是执行一次以后就不会执行,但 ...

  6. css3,transition,animation两种动画实现区别

    我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js. 其实通常情况下,对于使用js我们更加倾向于使用css来设置动画. transfrom ...

  7. css3中transition和display的坑

    不知道大家做css3动画的时候遇到过这种情景没? 用opacity实现淡入淡出的效果.噢!good!一切正常 给个栗子: <!DOCTYPE html> <html> < ...

  8. css3中trastion,transform,animation基本的了解

    毕业答辩一耽误就是一个月的时间,感觉自己浪费好多时间,而且学习劲头都没有以前的好,学习是个漫长艰苦的事情,也出现了好多问题,希望自己有则改之,无则加冕,曾国藩曾说过:悔者,所以守其缺而禾取求全也.虽然 ...

  9. css3中什么时候用transition什么时候用animation实现动画

    在css3中transition和animation都可以实现动画效果,但是我们什么时候用transition,什么时候用animation. 当有事件触发动画的时候我们就用transition.比如 ...

随机推荐

  1. 正确使用ng-if和ng-show

    在使用bootstrap中,我们会经常用到按钮组,也就是btn-group,如果仔细观察的话,会发现一个按钮组的第一个和最后一个按钮分别是有圆角的,如下图: 但是中间的按钮是没有圆角的,这样显得比较美 ...

  2. JavaScript获取浏览器类型与版本

    从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: <script type="text/javascript"> var S ...

  3. 20个人艰不拆的事实:知道真相的我眼泪掉下来 T.T

    20个人艰不拆的事实:知道真相的我眼泪掉下来 T.T 原文链接http://www.u148.net/article/113612.html 来源:ruoning WuMo是丹麦画家Mikael Wu ...

  4. 发生tcp丢包(拥堵、超时)重传

    可以根据wireshark的Seq序列号和Ack序列号来进行详细分析. 可见,网络丢包(可能是网络拥堵.也有可能是骨干网上有"防火墙"故意随机丢包,因为这个服务器的IP放在国外)对 ...

  5. 【crawler】log4j:WARN No appenders could be found for logger (dao.hsqlmanager).

    This Short introduction to log4j guide is a little bit old but still valid. That guide will give you ...

  6. ireport5.6+jasperreport6.3开发(五)--以javabean为基准的报表开发(action关联)

    这里的是定方法主要参照sturts2-jasperreport-plugin的完成方法(其实就是抄的) PDF的样子是这样的两页的pdf 然后action的配置是这样的(不要在意格式) @Parent ...

  7. web.xml中的contextConfigLocation在spring中的作用

    在web.xml中通过contextConfigLocation配置spring, contextConfigLocation参数定义了要装入的 Spring 配置文件.默认会去/WEB-INF/下加 ...

  8. ps

    快速恢复默认值  有些不擅长Photoshop的朋友为了调整出满意的效果真是几经周折,结果发现还是原来的默认效果最好,这下傻了眼,后悔不该当初呀!怎么恢复到默认值呀?试着轻轻点按选项栏上的工具图标,然 ...

  9. webpack学习笔记--安装

    1 首先要安装node  Node.js 自带了软件包管理器 npm,Webpack 需要 Node.js v0.6 以上支持 2 npm install webpack -g 通常我们会将 Webp ...

  10. JAVA字符串05之课程问题解决

    (一)古罗马皇帝凯撒在打仗时曾经使用过以下方法加密军事情报:请编写一个程序,使用上述算法加密或解密用户输入的英文字串. 1.设计思想:首先选择是加密字符串还是解密字符串,两种算法相似.如果要加密字符串 ...