Почему .animate({“transform” : “rotate(20deg)” не срабатывает?

210

26 ноября 2016, 18:40

Есть картинка, которая абсолютно позиционирована, хочу при клике на элемент повернуть её ротейтом. Но, почему-то, никакой реакции на код вообще нет, всё стоит замертво

$(".red").click(function(){
        $(".elipse-style").animate({
            "-webkit-transform": "rotate(20deg)",
            "-moz-transform": "rotate(20deg)",
            "transform": "rotate(20deg)" 
        })
});

В чём собственно проблема ?

Answer 1

JQuery не умеет анимировать не-числовые свойства. Но вообще анимировать можно, есть трюк. Вот хороший пример: http://jsfiddle.net/ryleyb/ERRmd/.

$(…).animate({  textIndent: 0 /* или любое другое не очень-то нужное здесь свойство */ }, {
    step: function(now, fx) {
      $(this).css('-webkit-transform','rotate(' + now + 'deg)');
    },
    duration: 'slow'
}, 'linear');

Хотя, конечно, лучше воспользоваться CSS transition, будет проще и производительнее.