CSS3过渡瞬间应用于克隆元素

Question

我有一些元素,我正在通过添加一个新类来应用CSS3 Transitions.

HTML

<div id="parent">
   <div class="child">
   </div>
</div>

CSS

.child {
    background: blue;
    -webkit-transition: background 4s;
    -moz-transition: background 4s;
    transition: background 4s;
}

.newChild {
   background: red;
}

jQuery的

$(".child").addClass("newChild");

当我.child在添加新类之前克隆元素,然后我添加新类时,立即应用过渡,而不是之后4sec.

看看这个小提琴.

Answer 1

正如我在这里提到的:

如果要在元素之间设置延迟以触发转换,可以使用.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
    });
});

工作演示

更新

根据您的注释,您应该在删除子.end项时从克隆元素中删除该类$("#remove").click().

$("#remove").click(function(){
     $("#parent").children("div").remove();
    clone.removeClass('end');
});

原因是你已经定义了clone全局范围.因此,克隆元素将.end在添加类之后具有类$(this).addClass("end").

更新的演示.