如何在 jquery animate 中使用 css3 转换？答案

【问题标题】：how to use css3 transitions with jquery animate?如何在 jquery animate 中使用 css3 转换？
【发布时间】：2012-04-12 21:03:46
【问题描述】：

我有来自here 的这个轮播，我正在尝试向它添加一些 css3 转换选项。

更准确地说：

-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(45deg);

在我的 javascript 中

if (newPosition == 1) {
    new_width = pluginData.largeFeatureWidth;
    new_height = pluginData.largeFeatureHeight;
    new_top = options.topPadding;
    new_zindex = $feature.css("z-index");
    new_fade = 1.0;
  } else {
    new_width = pluginData.smallFeatureWidth;
    new_height = pluginData.smallFeatureHeight;
    new_top = options.smallFeatureOffset + options.topPadding;
    new_zindex = 1;
    new_fade = 0.4;
  }

并且动画函数在这里运行

 .animate(
      {
        width: new_width,
        height: new_height,
        top: new_top,
        left: new_left,
        opacity: new_fade
      }

生成的css是：

element.style {
    width: 225px;
    height: 115px;
    top: 70px;
    left: 50px;
    opacity: 0.4;
    z-index: 1;
}

现在，所有这些变量都由这个插件计算，我只对向这个动画函数添加变换选项感兴趣，如下所示：

....
} else {
    new_width = pluginData.smallFeatureWidth;
    new_height = pluginData.smallFeatureHeight;
    new_top = options.smallFeatureOffset + options.topPadding;
    new_zindex = 1;
    new_fade = 0.4;
    new_transform_style = 'preserve-3d';
    new_transform = 'rotateY(45deg)';
}

和

.animate(
      {
        width: new_width,
        height: new_height,
        top: new_top,
        left: new_left,
        opacity: new_fade,
        transform_style = new_transform_style;
        transform = new_transform;
      }

但我不确定这些是动画的正确样式符号

有什么想法吗？

谢谢

【问题讨论】：

jQuery 动画库不是由 CSS3 转换驱动的，它是严格基于 JavaScript 的。

标签： jquery css transform jquery-animate

【解决方案1】：

默认情况下，您不能在 jQuery 中设置旋转/缩放动画。

但是有一个插件可以解决这个问题：

Animate Rotation and Scale in CSS

【讨论】：

【解决方案2】：

您可以将自定义属性与 .animate() 一起使用，并使用 step 函数“手动”执行转换。

更多详情请见this SO answer of me。

【讨论】：