新浦京81707con > 注册购买 > javascript判断css3动画结束,动画的回调

原标题:javascript判断css3动画结束,动画的回调

浏览次数:154 时间:2019-05-02

css 动画的回调

2016/01/11 · CSS · 动画

原稿出处: 卖烧烤夫斯基   

在做项目中不时会超越使用动画片的景况。以前的情形是用js写动画,利用setTimeout函数或然window.requestAnimationFrame()落成目标成分的卡通片效果。固然后者消除了刷新频率和活动频率同步的主题素材,不过因为js频仍地操作dom带来的额外成本和错综相连的总括公式使得大很多开垦者对用原生js动画望而却步而取道各样插件动画。那其实也是html的一块软肋,在网址上做动画,无论就效果依然品质,JS仍旧差了flash许多步。所以当html五和css叁的正规化现身后,那种情形转换成了诸多人从js复杂的卡通片转向了多少轻巧的css动画。css三为我们提供了很棒的api来贯彻此前要求费极大的功力才具兑现的法力。只需求很轻松的代码,任哪个人都得以高速地球科学会css动画。上面是一个动画沿Y轴的上下游走的例证(此处均已webkit内核为私下认可标准,实际情状须要团结合营):

transform:

CSS

.mydiv { width:100px; height:100px; background:red; -webkit-transition: all 2s; } .newClass { -webkit-transform: translateY(100px) }

1
2
3
4
5
6
7
8
9
.mydiv {
    width:100px;
    height:100px;
    background:red;
    -webkit-transition: all 2s;
}
.newClass {
    -webkit-transform: translateY(100px)
}

animation:

CSS

@-webkit-keyframes mymove {     from {top:0px;}     to {top:200px;} } .mydiv {     width:100px;     height:100px;     background:red;     position:relative;     -webkit-animation:mymove 2s forwards; /* Safari and Chrome */ }

1
2
3
4
5
6
7
8
9
10
11
@-webkit-keyframes mymove {
    from {top:0px;}
    to {top:200px;}
}
.mydiv {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    -webkit-animation:mymove 2s forwards; /* Safari and Chrome */
}

如上是现阶段css动画平日选用的三种写法。就简洁单的动画片来讲一般倾向利用第壹种transoform,假设急需在做复杂的调换,能够动用第3种animation方法,通过在不一样的运动帧上写下该帧的情事落成。

不少情景下大家供给领悟动画曾几何时实现,以及哪些成就后必要做什么。也便是说须求二个卡通落成的回调函数。在js动画中你没有须求操心找不到回调函数,因为动画本人全依据于js,回调只可是是四个平日的函数而已。首先,卤煮也是习贯性地用js思维考虑那一个难点。既然知道动画的转移时间,那么能够用延时化解回掉的标题。下边是延时的点子

JavaScript

//css中代码可以看看动画持续贰s var delay = 三千; setTimtout(function(){ dosomething() }, delay);

1
2
3
4
5
//css中代码可以看到动画持续2s
var delay = 2000;
setTimtout(function(){
    dosomething()
}, delay);

上边的方法是简单理解,延时三个函数实践,延时的时间长度就是动画片变化的时刻,那样,看起来当动画产生时会霎时实施函数。可是,那种格局存在着不少严重的通病。第二、setTimeout函数和css动画不必然是一样的。因为动画初叶的时光和setTimeout的时光严苛来讲不是一直的,所以会并发照旧函数提前实行,要么动画提前甘休。第二、js代码和css代码耦合了。delay的年月要每一日跟着css内的岁月走,若是css代码更换或然js代码改造,两边都不能够不花时间修复同步(也正是改成为平等时间)那扩展了职业量。第1、八个卡通会带来越来越多的代码量和不明显因素。因为每多个计时器针对的是单独的卡通成分,所以动画成分一多起来就务须增添越来越多的代码。第6、无法处理八个卡通成分同暂且间结束的情状。等。。。。

上述只是有的意识的瑕疵,对于复杂的卡通片来讲,延时函数是一心无法适应。那么有措施管理动画的回调吗?答案自然是听之任之的。而且比非常粗大略,跟从前绑定点击事件是同等的。js提供了css三中两种动画的竣事事件。大家利用它们,能够很轻巧捕获到动画的成功意况。

transitionEnd

JavaScript

document.getElementById('my').addEventListener('transitionEnd', function(){ alert('Transform animation has done!'); });

1
2
3
document.getElementById('my').addEventListener('transitionEnd', function(){
    alert('Transform animation has done!');
});

animationend

JavaScript

document.getElementById('my').addEventListener('animationend', function(){ alert('Animation has done!....'); });

1
2
3
document.getElementById('my').addEventListener('animationend', function(){
    alert('Animation has done!....');
});

大家可以看到,它们对于开拓者来讲一点也不目生。不论是用法依然字面名称,都使得大家可以洞悉。其实说了啰里吧嗦一大堆,那篇博客首要就是五个事件名称而已。上面是它们的相配效果。大多数浏览器都帮助了那三种事件,基本上帮忙css3动画的浏览器就能够支撑那二种事件。

图片 1

图片 2

填补有些:animationend只是animation变化事件中的一种。你应当能体悟别的的扭转景况,没有错正是:animationstart,animationiteration. 利用那二种情景时间,大家得以任性的支配调换中的动画效果。尤其是animationiteration事件,能够让我们在动画变化历程中插上一手。

1 赞 3 收藏 评论

图片 3

//css中代码可以看到动画持续2s
var delay = 2000;
setTimtout(function(){
    dosomething()
}, delay);

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>suface   js判定css动画是或不是终止</title>
</head>
<body>
<p>一旦动画或退换甘休,回调函数就能触发。不再需求大型类库扶助。<br> </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">css三动画过度逐步隐藏(transition-duration:三s;)</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';
   }
  })();<br></script>
</body>
</html>

animationend

transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你依然必要使用webkit前缀,所以,大家只可以依照各类浏览器分别检查评定事件

以上只是有个别意识的后天不足,对于复杂的动画来说,延时函数是完全无法适应。那么有艺术管理动画的回调吗?答案当然是毫无疑问的。而且很简短,跟此前绑定点击事件是1致的。js提供了css三中二种动画的收尾事件。我们使用它们,能够很轻巧捕获到动画的落成情状。

您也许感兴趣的稿子:

  • JS动态插入并马上施行回调函数的法子
  • Javascript基于AJAX回调函数字传送递参数实例分析
  • js自定义回调函数
  • 谈谈JavaScript自定义回调函数
  • js的回调函数详解
  • 告诉你什么样是javascript的回调函数
  • 掌握javascript中的回调函数(callback)
  • js中回调函数的上学笔记
  • JS脚本加载后实践相应回调函数的操作方法

补偿有些:animationend只是animation变化事件中的壹种。你应当能体悟别的的扭转景况,没有错正是:animationstart,animationiteration. 利用那三种情形时间,我们得以专擅的主宰转换中的动画效果。特别是animationiteration事件,能够让我们在动画变化历程中插上一手。

var transitions = {
       'transition':'transitionend',
       'OTransition':'oTransitionEnd',
       'MozTransition':'transitionend',
       'WebkitTransition':'webkitTransitionEnd'
     }

animation:

图片 4

document.getElementById('my').addEventListener('animationend', function(){
    alert('Animation has done!....');
});

复制代码 代码如下:

本文由新浦京81707con发布于注册购买,转载请注明出处:javascript判断css3动画结束,动画的回调

关键词: 新浦京81707con CSS HTML/CSS

上一篇:angular系列学习笔记,你一定是闲得蛋疼才重构的

下一篇:没有了