javascript - 在 CSS Transition 之前克隆元素返回应用了过渡的元素

Question

我想做的是在应用 CSS3 Transitions 之前(在添加类之前)克隆一些元素。

在 $(window).load() 上，我克隆元素，然后添加应该启动转换的新类。

在使用 .remove() 删除之前的元素后，我 .append() 克隆希望它包含没有过渡效果的原始元素，但这是'发生了什么事。

HTML

<div id="parent">
    <div class="start">
    </div>
</div>
<input type="button" value="1- Remove Elements" id="remove"/>
<input type="button" value="2- Generate" id="generate" />

CSS

.start {
    background: blue;
    -webkit-transition: background 4s;
    -moz-transition: background 4s;
    transition: background 4s;
}
.end {
    background: red;
}

jQuery

var clone = "";

$(window).load(function(){
    clone = $("#parent").children("div");
    $("#parent").children("div").addClass("end");
});

$("#remove").click(function(){
     $("#parent").children("div").remove();
});

$("#generate").click(function(){
    $("#parent").append(clone);
});

我在这里做了一个完整的例子:

http://jsfiddle.net/Gv93G/

更新

再次添加类后我错过了检查结果，它没有按预期工作检查这个 fiddle http://jsfiddle.net/QeVF6/

取回克隆后，我添加了类，并立即应用了转换。

我需要的是应用过渡，但不是立即应用，我希望在新添加的克隆上看到相同的 4sec 效果。

Answer 1

使用 clone = $("#parent").children("div") 不会创建匹配元素的副本，而是将返回的列表存储到变量中。

为了创建匹配元素的副本，你应该使用.clone()方法如下:

clone = $("#parent").children("div").clone();

UPDATED DEMO .

更新

我假设您不想在克隆的元素上应用过渡。

如果你想在元素之间设置一个延迟来触发过渡，你可以使用.queue()和 .dequeue()方法如下:

$("#generate").click(function() {
    $("#parent").append(clone);

    $("#parent").children("div").delay(4000).queue(function() {
        $(this).addClass("end").dequeue(); // move to the next queue item
    });
});

WORKING DEMO