4

JavaScript でカスタム CSS3 アニメーションを作成して実行する必要があります。トランジションを作成する必要があるときは、次のように記述します。

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

アニメーション要素が必要な場合は、書く必要があります

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

しかし、同じ方法で「open」のキーフレームを作成することはできません。確かに、私は次のように書くかもしれません

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

しかし、これは汚い考えなので、アニメーション ルールでプログラムによって webkit-transformation 値を変更することを読んだ後、次のように書きます。

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";

</p>

エラーが発生します: Uncaught Error: SYNTAX_ERR: DOM Exception 12

私が間違っていることと、これをより適切な方法で行うにはどうすればよいですか? この見た目はひどい。

http://jsfiddle.net/silentimp/273e2/ — テスト

4

1 に答える 1

0 
var keyframes = "@-webkit-keyframes{...}";
var s = document.createElement( 'style' );
s.innerHTML = keyframes;

ソース

また

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

于 2013-08-13T08:57:00.910 に答える