Как я могу создать пользовательскую анимацию ключевых кадров CSS с помощью JavaScript - PullRequest
Новая
       34

Как я могу создать пользовательскую анимацию ключевых кадров CSS с помощью JavaScript

4 голосов
/ 20 марта 2012

Мне нужно создать и запустить собственную анимацию css3 с помощью javascript. Когда мне нужно создать переход, я пишу что-то вроде этого: 

element.style[Modernizr.prefixed('transform')] = 'rotateY(50deg)';

Когда мне нужен элемент анимации, я должен написать 

element.style[Modernizr.prefixed('animation')] = "'test' 2s ease-out infinite";

Но я не могу создать ключевой кадр для 'open' таким же образом. Конечно, я могу написать что-то вроде 

document.creteElement("style").innerHTML = rule;

но это грязная идея, поэтому после прочтения программно изменяя значения преобразования webkit в правилах анимации Я пишу это: 

var style = document.documentElement.appendChild(document.createElement("style")),
index = Modernizr._prefixes.length,
rule = "";

while(index--){
    rule+="@"+Modernizr._prefixes[index]+"keyframes 'test'{ 0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} ";
}

style.sheet.insertRule(rule);
$(".mojo")[0].style[Modernizr.prefixed('animation')] = "'test' 2s ease-out infinite";

1015 *

и получите ошибку: Uncaught Error: SYNTAX_ERR: DOM Exception 12

Что я делаю неправильно и как я могу сделать это более подходящим способом? Это выглядит ужасно.

http://jsfiddle.net/silentimp/273e2/ - тест

1 Ответ

0 голосов
/ 13 августа 2013 
var keyframes = "@-webkit-keyframes{...}";
var s = document.createElement( 'style' );
s.innerHTML = keyframes;

источник

или

https://github.com/krazyjakee/jQuery-Keyframes

...