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

Question

我想要做的是附加一个容器，用内容填充它，然后通过删除一个类并让 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");
};

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