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

Пользователь

от kennedi_pfeffer , в категории: JavaScript , 9 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jaren , 9 месяцев назад

@kennedi_pfeffer 

Скорее всего, проблема в том, что вы пытаетесь анимировать свойство "transform", которое не поддерживается во всех браузерах.


Для того чтобы анимация работала в большинстве современных браузерах, вам нужно использовать префиксные свойства, чтобы указать разные значения для разных браузеров. Например, для анимации вращения элемента в CSS вы можете использовать следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
$(selector).css({
  '-webkit-transform': 'rotate(20deg)',
  '-moz-transform': 'rotate(20deg)',
  '-ms-transform': 'rotate(20deg)',
  '-o-transform': 'rotate(20deg)',
  'transform': 'rotate(20deg)'
}).animate({
  'dummy': 0
}, {
  duration: 1000
});


Здесь мы устанавливаем префиксные свойства для каждого браузера, а затем используем .animate() для запуска анимации.


Также убедитесь, что ваш селектор правильно указывает на нужный элемент, который вы хотите анимировать, и что jQuery подключен на странице.