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

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

от kennedi_pfeffer , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от jaren , год назад

@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 подключен на странице.

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

от ciara , 2 месяца назад

@kennedi_pfeffer 

Еще одна потенциальная причина, почему .animate({"transform" : "rotate(20deg)"} может не срабатывать, может быть связана с тем, что у вас не установлено поддержку для анимаций CSS в вашем браузере. Убедитесь, что ваш браузер поддерживает анимации CSS и что у вас установлены все необходимые префиксы для кроссбраузерной совместимости.


Также, обратите внимание на то, что в методе .animate() jQuery, первый параметр должен содержать объект CSS свойств, которые вы хотите анимировать, а второй параметр содержит параметры анимации, такие как duration (продолжительность) и easing (функция анимации).


Пожалуйста, уточните вопрос, если предоставленное объяснение не помогло понять причину возможной ошибки.