Значение ключевого кадра 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% уверен, что у меня просто нет синтаксиса для переменной (серьезно мне ужасно вспоминать, что что-то требует скобок, цитаты, squigglys и т.д., И я пробовал все, о чем я могу думать).

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

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

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

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

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

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

Спасибо.

Ответ 1

Хорошо, не то, что выглядит ваш фактический код, но вы не можете перебрасывать переменные 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 (до тех пор, пока эта ссылка работает, gitorious довольно плохо при сохранении URL-адресов).

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

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

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

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

Ответ 2

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

Обратите внимание, что этот API является экспериментальным и не работает с перекрестным браузером, за исключением вышеупомянутого.

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

Ядерный пример MDN

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

см

Ответ 3

Для тех, кто ищет этот ответ в 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 можно найти здесь