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

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

1 个答案: