菜单

css 动画的回调

2018年11月15日 - CSS/CSS3

css 动画的回调

2016/01/11 · CSS ·
动画

初稿出处:
出售烧烤夫斯基   

每当开项目面临常常会赶上使用动画片的图景。以前的图景是故js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果。虽然后者解决了刷新频率和走频率同步的问题,但是因js频繁地操作dom带来的额外开销和复杂的计算公式使得大多数开发者对用原生js动画望而却步而取道各种插件动画。这实际上呢是html的一律块软肋,在网站上开动画,无论就效果还是性能,JS还是见仁见智了flash很多步。所以当html5和css3的正规化出现继,这种气象变化成了多数口打js复杂的动画片转向了稍稍好之css动画。css3也咱提供了挺过硬的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,如果需要在开复杂的换,可以采取第二栽animation方法,通过在不同的运动帧上写下该帧的状态实现。

多多状态下我们用理解动画何时就,以及什么成就后需要做呀。也就是说要一个动画片就的回调函数。在js动画中公免待操心找不至回调函数,因为动画本身都靠让js,回调只不过是一个一般性的函数而已。首先,卤煮啊是习惯性地用js思维思考这个问题。既然知道动画的变型时,那么好为此延时缓解回掉的题目。下面是延时的办法

JavaScript

//css中代码可以见到动画持续2s var delay = 2000; 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代码改变,两边都不能不花时间修复并(也不怕是改化平等时)这多了工作量。第三、多个卡通会带动更多的代码量和莫确定因素。因为各一个定时器针对的凡单独的动画元素,所以动画元素一多起便非得加加更多之代码。第四、无法处理多独卡通元素同一时间结束的状态。等。。。。

以上就是有意识的败笔,对于复杂的卡通来说,延时函数是意不能够适应。那么闹艺术处理动画的回调吗?答案当然是必然的。而且特别简单,跟之前绑定点击事件是一样的。js提供了css3遭遇简单栽动画的利落事件。我们应用她,可以十分易捕获到动画的落成情况。

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

javascript判断css3动画了 css3动辄画完的回调函数,css3转头调函数

css3 的时期,css3–动画 一切都有或;

图片 4

习俗的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>
</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’;
   }
  })();<br></script>
</body>
</html>

上述就是本文所陈述之关于javascript判断CSS3动辄画了之方,希望大家会好

http://www.bkjia.com/Javascript/965585.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/965585.htmlTechArticlejavascript判断css3动画结束
css3动辄画完的回调函数,css3掉调函数 css3 的一世,css3–动画
一切都有或; 传统的js 可以透过回调函数判断动画…

相关文章

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图