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