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/

更新

我在再次添加课程后错过了检查结果，但是没有按预期工作检查这个小提琴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

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

更新

1 个答案:

更新