Animate元素变换旋转

Question

Animate元素变换旋转如何使用jQuery旋转元素.animate()？我正在使用下面的行，它正在正确地设置不透明度，但这是否支持CSS3转换？$(element).animate({    opacity: 0.25,    MozTransform: 'rotate(-' + -amount + 'deg)',    transform: 'rotate(' + -amount + 'deg)'});

Answer 1

我在元素中有文字。为了将文本与其他所有内容一起旋转，我使用了border-spacing属性而不是text-indent。

另外，为了澄清一下，在元素的样式中，设置初始值：

#foo {
    border-spacing: 0px;}

然后在动画块中，你的最终值：

$('#foo').animate({  borderSpacing: -90 }, {
    step: function(now,fx) {
      $(this).css('transform','rotate('+now+'deg)');  
    },
    duration:'slow'},'linear');

在我的情况下，它逆时针旋转90度。

Answer 2

在我看来，animate与CSS3相比，jQuery 有点过度使用transition，后者在任何2D或3D属性上执行此类动画。另外，我担心，将它留给浏览器并忘记名为JavaScript的图层可能会导致CPU备用 - 特别是当您希望使用动画进行爆破时。因此，我喜欢使用样式定义的动画，因为您使用JavaScript定义了功能。您注入JavaScript的演示文稿越多，您稍后将面临的问题就越多。

您所要做的就是使用addClass要设置动画的元素，您可以在其中设置具有CSS transition属性的类。您只需“激活”动画，该动画将保留在纯表示层上。

.js文件

// with jQuery$("#element").addClass("Animate");// without jQuery librarydocument.getElementById("element").className += "Animate";

可以使用jQuery轻松删除类，或者删除没有库的类。

的CSS

#element{
    color      : white;}#element.Animate{
    transition        : .4s linear;
    color             : red;
    /** 
     * Not that ugly as the JavaScript approach.
     * Easy to maintain, the most portable solution.
     */
    -webkit-transform : rotate(90deg);}

html的

<span id="element">
    Text</span>

对于大多数用例，这是一种快速方便的解决方案。

当我想实现不同的样式（替代CSS属性）时，我也使用它，并希望使用全局.5s动画即时更改样式。我添加了一个新类BODY，同时在这样的形式中使用替代CSS：

.js文件

$("BODY").addClass("Alternative");

的CSS

BODY.Alternative #element{
    color      : blue;
    transition : .5s linear;}

这样，您可以在动画中应用不同的样式，而无需加载不同的CSS文件。您只需要JavaScript来设置class。