Установите значения ключевых кадров Webkit, используя переменную Javascript

У меня есть кусок кода JS для генерации случайных чисел и вывода их в качестве переменных, которые будут использоваться здесь вместо значений вращения

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(10deg);}
}

#dog{
/*irrelevant settings*/
-webkit-animation: rotate 5s infinite alternate ease-in-out;
}

Приведенный выше код работает нормально, однако, когда я пытаюсь вставить переменные из JavaScript в rotate(variable); Я не могу заставить его работать. Я новичок в этом, поэтому я на 90% уверен, что у меня просто нет правильного синтаксиса для переменной (серьезно, я ужасно запоминаю, нужно ли что-то в скобках, кавычках, загадках и т. Д., И я попробовал все, что мог придумать),

Или это может быть потому, что переменная является локальной для функции и CSS не может это прочитать.

В общем, мне просто нужен какой-то незнакомец, чтобы сказать мне правильный синтаксис и как заставить CSS читать переменную, если это возможно.

В противном случае, похоже, мне понадобится функция для создания всего:

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(10deg);}
}

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

Ох, и в настоящее время переменная отформатирована, чтобы включить deg после номера, так что это не проблема. На самом деле, ради простоты просто предположим, что я использую var dogValue = "20deg"; и забыть случайный элемент.

Благодарю.

Источник

3 ответа

Решение

Ладно, не то, как выглядит ваш реальный код, но вы не можете бросать переменные JavaScript в CSS, он не распознает их.

Вместо этого вам нужно создать правила CSS с помощью JavaScript и вставить их в CSSOM (объектную модель CSS). Это может быть сделано несколькими способами - вы можете просто создать анимацию ключевого кадра и добавить ее, или вы можете перезаписать существующую анимацию. Ради этого вопроса я собираюсь предположить, что вы хотите постоянно перезаписывать существующую анимацию ключевого кадра с различными значениями вращения.

Я собрал (и задокументировал) JSFiddle, на который вы можете посмотреть: http://jsfiddle.net/russelluresti/RHhBz/2/

Он начинается с анимации поворота на -10 -> 10 градусов, но затем вы можете нажать кнопку, чтобы выполнить вращение между случайными значениями (от -360 до 360 градусов).

Этот пример был взломан прежде всего из более ранних экспериментов, проведенных Саймоном Хаусманном. Вы можете увидеть источник здесь: http://www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html (до тех пор, пока эта ссылка работает, довольно плохо в ведении URL).

Я также взял код функции JavaScript randomFromTo здесь: http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/

Я добавил документацию к тем частям сценария Симона Хаусмана, которые я взял у него (хотя я немного их изменил). Я также использовал jQuery только для того, чтобы прикрепить событие click к моей кнопке - все остальные скрипты написаны на нативном JavaScript.

Я проверил это для Chrome 18 и Safari 5.1, и, похоже, он отлично работает в обоих браузерах.

Надеюсь это поможет.

Источник

В chrome 49 и далее Firefox 48 и далее вы можете использовать новый API Javascript element.animate() вставлять анимацию ключевых кадров.

Пожалуйста, обратите внимание, что этот API является экспериментальным и не работает в разных браузерах, кроме вышеупомянутых.

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

Дернул пример MDN

document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translateY(0px)' }, 
  { transform: 'translateY(-300px)' }
], { 
  // timing options
  duration: 1000,
  iterations: Infinity
});

см:

Источник

Для тех, кто ищет этот ответ в 2017 году, вот что изменилось в ответе RussellUresti.

В его примере это больше не будет работать:

keyframes.insertRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");
keyframes.insertRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");

Это связано с тем, что.insertRule() является нестандартным именем. Теперь это.appendRule(), поэтому код RusselsUresti теперь будет:

keyframes.appendRule("0% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");
keyframes.appendRule("100% { -webkit-transform: rotate(" + randomFromTo(-360,360) + "deg); }");

Более подробную информацию о CSSKeyframeRule можно найти здесь

Источник
Другие вопросы по тегам