使用javascript优化css动画

时间:2016-06-17 01:06:55

标签: javascript angularjs-directive css-animations

可以使用javascript优化css动画,我正在开发一个指令来创建动态标签,并希望在它们的转换之间实现动画,但是css转换demontram非常慢,有一种方法可以优化它们。我的指令可在以下网址获得:tab-nav-bar此版本不支持动画,有人会知道如何最好地实现动画。

1 个答案:

答案 0 :(得分:0)

最重要的是,当使用CSS(或JS偶数)的动画片时,要关注正确的属性。其中一些会导致整个布局重新绘制。

要记住的最重要的事情是 - 动画转换属性,而不是'left','right','width'等。

您可以阅读有关平滑动画的更多信息in this article,并找到动画的最佳属性列表here

使用有效动画的另一种方法是使用js动画库 - 比如GSAP。它有一个简单的语法,非常有效 - 这是一个很小的demo of it's basic capabilities

以下是GSAP语法的一个小例子:

//pulsate the box using scaleX and scaleY
TweenMax.to(elementSelector, 1.2, {
 scaleX:0.8, 
 scaleY:0.8, 
 force3D:true, 
 yoyo:true, 
 repeat:-1, 
 ease:Power1.easeInOut
});

这是home page of GSAP