我可以使用javascript回退将jQuery动画转换为CSS3过渡/转换吗？

Question

好的，这是一个动画演示(点击标题中的“潮人”)：http://jacksongariety.com/

这相当简单。从100%维度更改为75%维度，并从0不透明度变为1不透明度。当你按下X键时，它就会反转过来。我的性能问题是由jQuery用来动画的javascript setInterval引起的。我尝试了一些调整，看起来我将不得不使用CSS3，这是我不热衷的更混乱的代码。

那么，如何转换此jQuery动画：

.animate({
        opacity: 0,
        width: '100%',
        height: '100%',
        left: '-50%',
        top: '-50%'
}, {
        duration: 200,
specialEasing: {
        opacity: 'linear',
        width: 'linear',
        height: 'linear',
        marginLeft: 'linear',
        marginTop: 'linear'
}

...into CSS3转换/转换？那么，对于较老的浏览器，它会退回到速度较慢的jQuery动画吗？

提前感谢！

Answer 1

首先，你只需要对你正在做的事情进行转换。动画没有得到广泛的支持，您使用jQuery的animate()所做的任何事情都可以通过转换来完成(除了非常特定类型的转换，如弹性或弹跳转换)。

我会将这个转换添加到我的CSS中，然后在javascript中使用modernizr进行特征检测。

例如，我的CSS可能看起来像这样(这不是您想要做的，而是一个示例)：

#lightbox {
  opacity: 0;
  width: 100%;
  height: 100%;
  left: -50%;
  top: -50%;

    -ms-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;

  -webkit-transform: translateZ(0);
}

#lightbox.active {
  left: 0;
  top: 0;
  opacity: 1;
}

因此，现在可以使用addClass("active")来打开或关闭默认的隐藏状态。在支持CSS3转换的浏览器中，现在就会发生这种情况！对于不支持CSS3过渡的浏览器，ID为lightbox的元素将在没有动画的情况下出现或消失。还要注意，我添加了一个webkit translateZ属性。这是一个在Safari和Chrome的CSS3转换中获得图形处理器加速的技巧。它在性能上有很大的不同，特别是在iOS设备上。

好的-那么现在我们如何在不支持CSS3转换的浏览器上使用jquery.animate呢？这就是modernizr发挥作用的地方。假设用户单击了close按钮，您现在希望lightbox淡出。对于具有CSS3转换的浏览器，您可以删除"active“类，或者对不支持转换的浏览器使用jquery.animate方法：

if(Modernizr.csstransitions){
  $("#lightbox").removeClass("active");
} else {
  $("#lightbox").animate({...});
}

有关该属性的更多信息，请参阅：http://www.modernizr.com/docs/#csstransitions