当jQuery.html（）完成时，CSS为转换设置动画

我想做的是附加一个容器，用内容填充它，然后通过移除一个类并让CSS通过一个转换处理它来设置它的动画。我可以做所有这些，除了在动画中。我认为这可能是某种竞争条件或类似的情况，因为如果我在移除类时放置setTimeout（），它将在中设置动画。这里有两个例子：

HTML

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

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

JavaScript

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

函数test1（）{
$（“.container”）。追加（“”）；
$（“.flyin”）.html（“这是测试内容”）；
$（“.flyin”）.removeClass（“左”）；
};

我不知道是否可以更改html，但是可以预先生成一个空的flying left元素，只在单击时触发动画

函数test1（）{
$（“.flyin”）.html（“这是测试内容”）；
$（“.flyin”）.removeClass（“左”）；
$（“.container”）。追加（“”）；
};

我也尝试了这一个，它成功了，但我宁愿在页面上没有我现在不需要的html。你知道为什么这比附加它更有效吗？我以为append是一个同步调用。我想我正在接近找出问题所在。在我删除之前，似乎没有对将该飞入从页面中删除的类“left”进行评估。要么这样，要么动画不是这样。我认为它是同步的，因为您可以在dom树中与对象交互，但渲染只在事件处理程序之后进行，这从性能角度来看也是有意义的。这对我来说是有意义的。我最后做的是检查它在屏幕上的位置，这会导致回流（我想）。这样就可以评估样式，我可以通过删除类来设置它的动画。当然，它可以做一些完全不同的事情，但它正在工作。谢谢你的帮助！如果您或任何其他人对此感兴趣，这里有一个指向解决方案的链接。

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

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