4

私がやりたいのは、コンテナーを追加し、コンテンツで埋めてから、クラスを削除し、CSSにトランジションを介して処理させることで、コンテナーをアニメーション化することです。アニメーション化する以外はすべて実行できます。クラスの削除時にsetTimeout（）を設定すると、アニメーション化されるため、何らかの競合状態などの可能性があると思います。両方の例：

http://jsfiddle.net/38q7A/3/

HTML

<div class="test1">test 1</div>

<div class="container"></div>

CSS

.flyin {
     -webkit-transition: all 1s ease-in-out;
     -moz-transition: all 1s ease-in-out;
     -ms-transition: all 1s ease-in-out;
     -o-transition: all 1s ease-in-out;
     transition: all 1s ease-in-out;
}

.left {
     position: fixed;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
 }

JavaScript

function test1(){
     $(".container").append("<div class='flyin left'></div>");
     $(".flyin").html("this is test content");
     $(".flyin").removeClass("left");
};
4

1 に答える 1

1

HTMLを変更することがオプションかどうかはわかりませんが、空のflying-left要素を事前に生成し、http：//jsfiddle.net/uHPmc/1/をクリックしたときにのみアニメーションをトリガーすることができます。

<div class="container">
    <div class="left flyin"></div>    
</div>

function test1(){
    $(".flyin").html("this is test content");
    $(".flyin").removeClass("left");
    $(".container").append("<div class='flyin left'></div>");
};
于 2013-03-17T21:40:24.107 に答える