CSSの変更点

追加された行はこのように表示されます。
削除された行は~~このように~~表示されます。
{{outline}}

!!!-webkit-transition
*2つ以上のプロパティを同時に指定する方法。
*2つ以上のプロパティを同時に指定する方法
 element.style.webkitTransition = "-webkit-transform 10s ease-out, opacity 3s linear";
 element.style.webkitTransform = "translate(100px,100px)";
 element.style.opacity = 0;

*この書き方だと後から設定した方（opacity）だけしか有効にならない。
**この書き方だと後から設定した方（opacity）だけしか有効にならない
 element.style.webkitTransition = "-webkit-transform 10s ease-out";
 element.style.webkitTransition = "opacity 3s linear";
 element.style.webkitTransform = "translate(100px,100px)";
 element.style.opacity = 0;

*両方とも「10s」になってそうでなっていない。（-webkit-transformの方は初期値のまま）
**両方とも「10s」になってそうでなっていない（-webkit-transformの方は初期値のまま）
 element.style.webkitTransition = "-webkit-transform, opacity 10s";
 element.style.webkitTransform = "translate(100px,100px)";
 element.style.opacity = 0;

*webkitTransitionの値を途中で変更しても影響しない。
*webkitTransitionの値を途中で変更しても影響しない
 element.style.webkitTransition = "-webkit-transform 10s";
 element.style.webkitTransform = "translate(100px,100px)";
 /* しばらくして */
 /* しばらくしてから */
 element.style.webkitTransition = "-webkit-transform 5s";
 /* としても動きは変わらない */

**"initial"はすぐに影響する。
**"initial"はすぐに影響する
 element.style.webkitTransition = "-webkit-transform 10s, opacity 10s";
 element.style.webkitTransform = "translate(100px,100px)";
 element.style.opacity = 0;
 /* しばらくして */
 /* しばらくしてから */
 element.style.webkitTransition = "initial";
 /* とするとすぐ(100,100)に移動して消える */

 element.style.webkitTransition = "-webkit-transform 10s, opacity 10s";
 element.style.webkitTransform = "translate(100px,100px)";
 element.style.opacity = 0;
 /* しばらくして */
 element.style.webkitTransition = "-webkit-transform 3s";
 /* とすると、opacityの方は"initial"になるのですぐに消えてしまう */

**連続して書くと影響する。
**連続して書くと影響する
 element.style.webkitTransition = "-webkit-transform 10s";
 element.style.webkitTransform = "translate(100px,100px)";
 element.style.webkitTransition = "-webkit-transform 2s";
 /* この場合は「2s」が適用される。Transitionが動き始めてないから? */

**なので下のように書いて(100,100)から(200,200)にさせようとしてもうまくいかない
 element.style.webkitTransition = "initial";
 element.style.webkitTransform = "translate(100px,100px)";
 element.style.webkitTransition = "-webkit-transform 10s";
 element.style.webkitTransform = "translate(200px,200px)";
***無理やり作ってみた
 element.style.visibility = "hidden";
 element.style.webkitTransition = "1ms"; //"initial"や"0s"だとイベントが発生しない
 element.style.webkitTransform = "translate(100px,100px)";
 element.addEventListener("webkitTransitionEnd",function(e)
 {
     e.currentTarget.removeEventListener( "webkitTransitionEnd", arguments.callee, false );
     element.style.visibility = "visible";
     element.style.webkitTransition = "10s";
     element.style.webkitTransform = "translate(200px,200px)";
 });
***こっちの方がシンプル
 element.style.visibility = "hidden";
 element.style.webkitTransform = "translate(100px,100px)";
 setTimeout(function()
 {
     element.style.visibility = "visible";
     element.style.webkitTransition = "10s";
     element.style.webkitTransform = "translate(200px,200px)";
 },0);//0msでいいらしい
Menu

Latest
