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

32

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

<code>@-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;
}
</code>

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

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

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

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

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

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

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

Благодарность

Ваш Ответ

3   ответа
5

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

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

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

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

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

refer:

Caniuse.com / # Подвиг = веб-анимация Документация MDN
73

не то, как выглядит ваш реальный код, но вы не можете бросать переменные 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.htm (пока эта ссылка работает, gitorious плохо справляется с поддержкой 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 45, jsfiddle больше не работает. вот исправление. Jsfiddle.net / RandallFlagg / 7yx4zpq0 И вот почему: Developer.mozilla.org / о / Docs / Web / API / CSSKeyframesRule Randall Flagg
На Chrome 65 скрипка работает, если вы измените insertRule на appendRule и window.CSSRule.WEBKIT_KEYFRAMES_RULE на window.CSSRule.KEYFRAMES_RULE Giuseppe
1

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 можно найти здесь

Похожие вопросы