码迷,mamicode.com
首页 > Web开发 > 详细

使用css 动画也可以回调函数

时间:2017-10-03 15:27:20      阅读:294      评论:0      收藏:0      [点我收藏+]

标签:提前   iter   win   补充   js动画   web前端   add   多个   常用   

在做项目中经常会遇到使用动画的情况。以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果。

      虽然后者解决了刷新频率和移动频率同步的问题,但是因为js频繁地操作dom带来的额外开销和复杂的计算公式使得大多数开发者对用原生js动画望而却步而取道各种插件动画。

      这其实也是html的一块软肋,在网站上做动画,无论就效果还是性能,JS还是差了flash很多步。所以当html5和css3的标准出现后,这种情况转变成了多数人从js复杂的动画转向了稍微容易的css动画。
      css3为我们提供了很棒的api来实现之前需要费很大的功夫才能实现的功能。只需要很简单的代码,任何人都可以快速地学会css动画。下面是一个动画沿Y轴的上下游走的例子(此处均已webkit内核为默认标准,实际情况需要自己兼容):
   transform:

.mydiv {

    width:100px;

    height:100px;

    background:red;

    -webkit-transition: all 2s;

}

.newClass{

    -webkit-transform: translateY(100px)

}

animation:

@-webkit-keyframesmymove {

    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思维思考这个问题。既然知道动画的变化时间,那么可以用延时解决回掉的问题。下面是延时的方法

//css中代码可以看到动画持续2s

var delay= 2000;

setTimtout(function(){

    dosomething()

},delay);

上面的方法是不难理解,延时一个函数执行,延时的时长就是动画变化的时间,这样,看起来当动画完成时会立即执行函数。但是,这种方式存在着很多严重的缺陷。第一、setTimeout函数和css动画不一定是一致的。因为动画开始的时间和setTimeout的时间严格来说不是一直的,所以会出现要么函数提前执行,要么动画提前结束。第二、js代码和css代码耦合了。delay的时间要随时跟着css内的时间走,如果css代码改变或者js代码改变,两边都必须花时间修复同步(也就是改成为一致时间)这增加了工作量。第三、多个动画会带来更多的代码量和不确定因素。因为每一个定时器针对的是单独的动画元素,所以动画元素一多起来就必须添加更多的代码。第四、无法处理多个动画元素同一时间结束的情况。等。。。。
  以上只是部分发现的缺点,对于复杂的动画来说,延时函数是完全不能适应。那么有方法处理动画的回调吗?答案当然是肯定的。而且很简单,跟之前绑定点击事件是一样的。js提供了css3中两种动画的结束事件。我们利用它们,可以很容易捕获到动画的完成情况。
  transitionEnd

document.getElementById(‘my‘).addEventListener(‘transitionEnd‘,function(){

    alert(‘Transform animation has done!‘);

});

animationend

document.getElementById(‘my‘).addEventListener(‘animationend‘,function(){

    alert(‘Animation has done!....‘);

});

我们可以看到,它们对于开发者来说一点也不陌生。不论是用法还是字面名称,都使得我们能够一目了然。其实说了啰里吧嗦一大堆,这篇博客主要就是两个事件名称而已。下面是它们的兼容效果。大多数浏览器都支持了这两种事件,基本上支持css3动画的浏览器就会支持这两种事件。

  补充一点:animationend只是animation变化事件中的一种。你应该能想到其他的变化状态,没错就是:animationstart,animationiteration.利用这三种状态时间,我们可以随心所欲的控制变化中的动画效果。尤其是animationiteration事件,能够让我们在动画变化过程中插上一手。

 

WEB前端学习交流群21 598399936

 

使用css 动画也可以回调函数

标签:提前   iter   win   补充   js动画   web前端   add   多个   常用   

原文地址:http://www.cnblogs.com/luludehuhuan/p/7623744.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!