Как написать анимацию CSS3 с объектами JavaScript?

Для библиотеки анимации, которую я создаю, мне нужны переходы и анимации.

Переходы были простыми. Я могу легко получить доступ к свойству перехода из свойства style элемента element:

document.body.style['-webkit-transition'] = "background 1s";
 document.body.background = "#f00";

Я знаю, что в CSS есть две части анимации, @-keyframes, а затем вызов реальной анимации.

Как назначить правило @-keyframe через чистый JavaScript?

Это не было бы чем-то вроде переходов, потому что правила @-keyframe не применяются непосредственно к элементам.

Альтернативой этому было бы динамическое создание правила @-keyframes через JavaScript из строки и добавление его во временную таблицу стилей. Вид неряшливый, вот почему мне интересно, как это сделать непосредственно через DOM.

Есть ли способ? Из того, что я видел на некоторых других сайтах, вы можете играть в анимации и останавливать их на определенных ключевых кадрах, но как вы сами создаете анимацию?

2 ответа

Вы должны использовать CSSOM, который позволяет вам (между прочим) манипулировать таблицами стилей, загружаемыми в документ. Прежде всего, вам нужна @keyframe стилей, загруженная в ваш документ, где вы добавите правила @keyframe. Если у вас его нет, вы можете динамически создать HTML- style и добавить его в head. Тогда вы должны получить экземпляр CSSStyleSheet интерфейса, представляющий собой таблицу стилей, вы можете извлечь sheet свойство style (или link HTML элемента), или взять его из списка доступного в document.styleSheets.

Когда у вас есть объект, вы можете просто вызвать метод insertRule на нем, передав все правило в виде строки, а для второго параметра - число, указывающее позицию (перед тем, какое правило будет добавлено к этому).

Если вам нужно больше манипулировать анимациями, ознакомьтесь с API-интерфейсами: http://www.w3.org/TR/css3-animations/#dom-interfaces http://www.w3.org/TR/DOM- Уровень-2-Style/css.html


Я не видел javascript api-решение, но это возможно с помощью CSS-стилей, сгенерированных из javaScript.

Посмотрите http://krazyjakee.github.io/jQuery.Keyframes/, если вы используете jQuery.

Если вы хотите чистое обоснование javascript, тогда взгляните на этот пост

licensed under cc by-sa 3.0 with attribution.