CSS动画效果的回调,动画的回调

css 动画的回调

2016/01/11 · CSS · 动画

原稿出处: 卖BBQ夫斯基   

在做项目中时常会境遇使用动画片的情况。从前的情形是用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 = 三千; 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

css3 的有的时候,css3--动画 一切都有相当的大可能率;

用纯JS完结动画效果代码量大,计算复杂.因而未来前端页面包车型客车卡通效果日常都选择CSS来完成.

图片 4

CSS动画完毕轻便便捷,不过在处理动画,调控动画进度上却远远不够一些立竿见影花招.

古板的js 能够透过回调函数剖断动画是不是终止;固然是选取CSS技术生成动画效果,JavaScript照旧能捕获动画或改变的扫尾事件;

举例大家想在动画效果完结时调用回调函数来拍卖部分业务,会意识CSS并从未提供第一手的不二等秘书诀来让大家使用.

transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你依旧供给采纳webkit前缀,所以,我们只能依照各个浏览器分别检查测验事件

一.css动画简单介绍

css动画效果有二种,即过渡和动画.

复制代码 代码如下:

1.过渡

当成分从一种样式调换为另一种体制,我们为这种改造增添动画功用,这种效应就称作过渡.

CSS的交接是通过 transtion 属性完结的.

transtion属性必需含有以下三个值:

  • 要增加过渡效果的体制属性名
  • 联网效果持续时间

除此以外还会有三个可选的属性值:

  • 对接效果的进程时间曲线函数
  • 连着效果的延迟时间

下面是叁个CSS过渡效果的事例:

   div{
      width: 100px;
      transition: width 2s;
      -webkit-transtion:width 2s;
    }
    div.hover{
      width: 300px;
    }

 

 当鼠标移动到此div上时,此div宽度会追加200px.

我们为宽度增添上 2s 过渡效果.最终效果如下:

 

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

 2.动画

在达成相比复杂的卡通时,单纯施用过渡已经智尽能索达到规定的规范指标,能够选择使用CSS的animation属性来定义动画效果.

要想行使animation属性,大家不可能不先通晓一下CSS3投入的@keyframes准绳.

@keyframes法则用于成立动画,能够从动画运动状态的帧来定义动画.

日常来讲即@kayframes定义动画的例子:

@keyframes show
{
    from {color: red;}
    to {color: yellow;}
}

@-webkit-keyframes show /* Safari 与 Chrome */
{
    from {color: red;}
    to {color: yellow;}
}

 

由此@keyframes大家能够定义动画从初阶到告竣的体制变化 .

咱俩也得以由此定义动画效果的百分比状态来定义动画样式,如下

@keyframes show
{
    0%   {color: red;}
    25%  {color: yellow;}
    50%  {color: blue;}
    100% {color: green;}
}

@-webkit-keyframes show /* Safari 与 Chrome */
{
    0%   {color: red;}
    25%  {color: yellow;}
    50%  {color: blue;}
    100% {color: green;}
}

 

在选择@keyframes定义了动画片效果之后,大家能够经过 animation 来将动画效果绑定到成分,如下:

div:hover{
   animation:show 5s;
}

 

具体效果如下:

动画文字

 鼠标移动其上就可以看出动画效果

上述正是CSS动画的简约介绍,其他CSS3还增添了transform属性,用于2D和3D转变,也被常常用来作为动画使用.

二.CSS动画的回调函数

像上述的CSS动画,假使想行使回调函数来支配动画完成后的事务管理,是相比辛劳的.

一.延时函数

无数人使用JS的延时函数 setTimtout() 来解决CSS动画的回调难点,类似如下的代码:

setTimtout(function(){
     dosomething()  //动画的回调函数
     }, delaytime);      //动画的持续时间

 

 

而是这种艺术由于并非真的含义的回调,会招致以下多少个难题:

  • 由于动画和延时函数并不一定是同时开端,导致函数和卡通不联合
  • 会导致JS代码和CSS代码相互关联耦合,修改和掩护相比劳苦
  • 留存三个卡通必要回调时会形成代码混乱和臃肿
  • 在多个卡通效果还要告竣作时间会引起回调函数冲突

因而,不提议采纳延时函数作为动画的回调函数.

下边附上源代码:

二.JS事件

实际,JS提供了七个事件,能够健全的消除动画的回调函数难点,那正是transtionend 和 animationend,当动画实现时,即会接触对应的事件.

大家得以经过那多个事件轻易温婉的为卡通增多回调函数.

实际用法如下:

transtionend

document.getElementById("myDIV").addEventListener("transitionend", myFunction); //myFunction即为动画回调函数

 

animationend

document.getElementById("myDIV").addEventListener("animationend", myFunction); //myFunction即为回调函数

 

笔者们因而以下这几个例子来体验那五个事件的具体行使:

<style>
  div#test
{
  width:100px;
  height:100px;
  background:red;
  transition:width 2s;
  -webkit-transition:width 2s; /* Safari */
}

div#test:hover
{
  width:300px;
}
</style>
</head>
<body>
<div id="test">&nbsp;</div> 
<script>
document.getElementById("test").addEventListener("transitionend", myFunction);
function myFunction() {
    this.innerHTML = "回调函数触发div变为粉色";
    this.style.backgroundColor = "pink";
}
</script>

效果如下:

 

 

当然也足以行使Jquery库的卡通回调函数,很轻便,代码类似如下,

 

   $("#item").animate({height:"200px"}, function() {
        alert("hello");
    });

 

以上就是关于CSS动画回调函数的有些学问,希望对您有帮衬.

复制代码 代码如下:

<!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动画结束的主意,希望大家能够喜欢

您恐怕感兴趣的小说:

  • JS动态插入并即刻推行回调函数的格局
  • Javascript基于AJAX回调函数传递参数实例分析
  • js自定义回调函数
  • 谈谈JavaScript自定义回调函数
  • js的回调函数详解
  • 告知你哪些是javascript的回调函数
  • 精通javascript中的回调函数(callback)
  • js中回调函数的就学笔记
  • JS脚本加载后试行相应回调函数的操作方法

本文由星彩网app下载发布于前端技术,转载请注明出处:CSS动画效果的回调,动画的回调

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。