Animate.css中的transform rotate()无法工作

Question

transform : rotate()可以在不使用animate.css的情况下工作，但在使用animate.css时则无法正常工作。

以下是代码：

HTML

<div id="fresh">FRESH</div>

CSS

#fresh{
    position : absolute;
    background-color : #cf2c2c;
    width: 38px;
    padding-left: 2px;
    color: #ffffff;
    border-radius: 5px;
    -ms-transform: rotate(-37deg);
    -webkit-transform: rotate(-37deg);
    transform: rotate(-37deg);
    right: 113px;
    bottom: 40px;
    font-size: 10px;
    z-index : 9999;
}

jQuery

$(document).ready(function(){
    $('#fresh').addClass("animated tada");
});

编辑

在fiddle中动画无法工作，但rotate（）可以工作。这意味着两者不能同时使用。

此处为Fiddle演示

- Madan Bhandari

---

你能提供一个fiddle，其中包含重现错误所需的所有引用吗？ - Arg0n

@Arg0n，请添加链接，麻烦查看。 - Madan Bhandari

我添加了另一个对animate.css的引用，现在它似乎可以工作了。请看这个fiddle：http://jsfiddle.net/Arg0n/ndad3aev/1/。 - Arg0n

将旋转的CSS添加到这个类中：<div class="rotate37i"><div id="fresh">FRESH</div></div> - Ashok Shah

Answer 1

更新 1

$(document).ready(function(){
    $('#fresh').addClass("animated tada");
});

#fresh{
    position : absolute;
    background-color : #cf2c2c;
    width: 38px;
    padding-left: 2px;
    color: #ffffff;
    border-radius: 5px;
    -ms-transform: rotate(-37deg);
    -webkit-transform: rotate(-37deg);
    transform: rotate(-37deg);
    right: 113px;
    bottom: 40px;
    font-size: 10px;
    z-index : 9999;
}

<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fresh">FRESH</div>

好的，我已经找到为什么不起作用了。需要添加正确的animate.css文件：https://daneden.github.io/animate.css/animate.min.css

现在试试，应该可以正常工作了。

UPDATE 2

   $(document).ready(function(){
finish =0;
AnimateRotate("-37");
  
function AnimateRotate(angle) {
// caching the object for performance reasons
var $elem = $('#fresh');

// we use a pseudo object for the animation
// (starts from `0` to `angle`), you can name it as you want
$({deg: 0}).animate({deg: angle}, {
    duration: 500,
    step: function(now) {
        // in the step-callback (that is fired each step of the animation),
        // you can use the `now` paramter which contains the current
        // animation-position (`0` up to `angle`)
        $elem.css({
            transform: 'rotate(' + now + 'deg)'
        });
    },
    complete: function() {
      if(finish!=1)
        $('#fresh').addClass("animated tada");
    }
});
  };
  $('#fresh').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$('#fresh').removeClass();
finish=1;
AnimateRotate("-37");
  });
});

#fresh{
    position : absolute;
    background-color : #cf2c2c;
    width: 38px;
    padding-left: 2px;
    color: #ffffff;
    border-radius: 5px;
    -ms-transform: rotate(-37deg);
    -webkit-transform: rotate(-37deg);
    transform: rotate(-37deg);
    right: 113px;
    bottom: 40px;
    font-size: 10px;
    z-index : 9999;
}

<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fresh">FRESH</div>

- P. Frank

---

我已经在js之前添加了css，并且控制台中没有错误。Animate.css工作正常，但是rotate()不起作用。即使没有animate.css，rotate()也可以正常工作。 - Madan Bhandari

是的，它有效。rotate()在开始时被应用，但之后是tada类被激活。这是正常的。 - P. Frank

我想要一个旋转动画（前后都有）并且旋转角度为-37度。 - Madan Bhandari

现在您已经拥有旋转动画。您可以随时修改它。-) - P. Frank

我明白了，但它不完全是我想要的，但它可以工作，谢谢 :) 顺便问一下，你认为问题出在哪里？所有其他的CSS效果都能够正常工作，只有rotate()不能。 - Madan Bhandari

Answer 2

我找到了另一种解决方案，但它并不完全符合我的期望。它能够正常工作，但我仍在等待更好的答案。

HTML

<div class="rotate37i">
        <div id="fresh">FRESH</div>
    </div>

CSS

   #fresh{
    position : absolute;
    background-color : #cf2c2c;
    width: 38px;
    padding-left: 2px;
    color: #ffffff;
    border-radius: 5px;
    right: 113px;
    bottom: 40px;
    font-size: 10px;
    z-index : 9999;
}
.rotate37i {
    -ms-transform: rotate(-37deg);
    -webkit-transform: rotate(-37deg);
    transform: rotate(-37deg);  
}

- Madan Bhandari