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");的CSSBODY.Alternative #element{     color      : blue;     transition : .5s linear;}这样，您可以在动画中应用不同的样式，而无需加载不同的CSS文件。您只需要JavaScript来设置class。