jquery - jQuery .html() 完成时 CSS 动画过渡

Question

我想要做的是附加一个容器，用内容填充它，然后通过删除一个类并让 CSS 通过转换来处理它来为其设置动画。我可以做所有这些，除了动画它。我认为这可能是某种竞争条件或类似的东西，因为如果我在删除类时放置 setTimeout() ，它就会动画化。这是一个 fiddle 两个例子:

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

Answer 1

我不知道更改 html 是否是一个选项，但您可以预先生成一个空的向左飞行元素，并且仅在单击时触发动画 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>");
};