javascript - 在 jQuery .animate 中使用 Modernizr.prefixed

Question

我不擅长 jQuery 语法，因为我喜欢 PHP。

我正在尝试制作一个 jQuery 动画，但在多个值上使用了正确的 vendor 前缀，但我对 Modernizr.prefixed 用法的理解让我失望。

我想得到的是这样的:

    $('.rightbox3d').animate({
        opacity: 1
        ,top:"60px"
        ,Modernizr.prefixed('transform'):"translateY(-200px)"
        ,Modernizr.prefixed('scale'):2
    }, 4000);

即。我想在动画样式列表中包含 vendor 前缀，但出现语法错误 - 意外标记。

我试过使用 var transformProperty = Modernizr.prefixed ？ Modernizr.prefixed('转换') : '转换'; 但它只允许列出一种样式 即:$(".rightbox3d").animate(transformProperty,"translateY(-200px)"); 当我想要的是多种样式，如变换、不透明度、缩放等。

我注意到那行代码在 transformProperty 部分周围没有大括号，而列表有 例如。 $('.rightbox3d').animate({ 不透明度:1 ，顶部:“-200px” }, 4000, 函数() { //动画完成。 });

但我只是无法理解它。谁能帮忙？

Answer 1

因此，您将不得不大跃进。 CSS Transitions 不同于 jQuery.animate。

这里有一个很好的介绍。 https://www.webkit.org/blog/138/

所以，首先让我们认识到我们不能再做同样的事情了

if (!Modernizr.csstransitions || Modernizr.csstransforms3d) {
   // use some css
} else {
   // use some jQuery
}

现在，让我们填写您的示例

if (!Modernizr.csstransitions || !Modernizr.csstransforms3d) {
  // Old jQuery version
  $('.rightbox3d').animate({
    opacity: 1,
    top: "-200px",
    width: 2 * $('.rightbox3d').width(),
    height: 2 * $('.rightbox3d').height()
  }, 4000);
} else {
  // Modern cool version
  // The transform is moving/rotating/stretching we want to do
  // The transition is the animation we want
  $('.rightbox3d').css({
    opacity: 1,
    transform: 'translateY(-200px) scale(2)',
    transition: 'all 4000ms ease-in-out'
  });
}

我认为这应该为您解决了这个问题。 :)