Question

好的，这是一个动画演示（点击标题中的HIPSTERS一词）：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'
}

...进入CSS3过渡/转换？然后让旧浏览器回退到缓慢的jQuery动画？

提前致谢！

Answer 1

首先 - 你只需要转换你正在做的事情。动画不被广泛支持，你使用jQuery的animate（）做的任何事情都可以通过转换来完成（除了非常特定类型的转换，例如弹性或反弹转换）。

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

例如我的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的元素只会在没有动画的情况下显示或消失。另请注意，我添加了一个webkit translateZ属性。这是在Safari和Chrome中为CSS3过渡获得GPU加速的技巧。它在性能上有很大的不同，特别是在iOS设备上。

好的 - 那么现在我们如何回退到不支持CSS3过渡的浏览器的jquery.animate？这是modernizr发挥作用的地方。假设用户点击了关闭按钮，您现在希望灯箱淡出。您将删除具有CSS3过渡的浏览器的“活动”类，或者对不支持过渡的浏览器使用jquery.animate方法：

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

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

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

1 个答案: