Css动画优化[关闭]答案

【问题标题】：Css animation optimisation [closed]Css动画优化[关闭]
【发布时间】：2012-12-17 22:31:00
【问题描述】：

我可以优化当动画对象不需要显示（它不在视口上）时不运行 CSS 动画吗？谢谢！

【问题讨论】：

【解决方案1】：

如果您可以检测到对象何时在视口中，您可以添加/删除带有动画描述的 css 类。比如：

// the css class to be added/removed
.animationClass
{
      animation: someAnimation 5s;
     -moz-animation: someAnimation 5s; /* Firefox */
     -webkit-animation: someAnimation 5s; /* Safari and Chrome */
     -o-animation: someAnimation 5s; /* Opera */
}

// the jQuery code
if( isObjectInViewPort() == true){
   $('.someObject').addClass('animationClass'); // note that there is no dot before 'animationClass'
   // or remove it $('.someObject').removeClass('animationClass');
}

棘手的部分是检查对象何时不在视口中。在我看来，不断检查对象是否在视口中并阻止动画会弊大于利，因为 css 动画是轻量级的并且效果很好。

【讨论】：