CSS3 transitions apply instantly to cloned elements

Question

I have some elements that I apply CSS3 Transitions to by adding a new class.

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

When I clone an element .childbefore adding a new class, and then adding a new class, the transitions are applied immediately, not after 4sec.

Take a look at the fiddle .

Answer 1

As I mentioned here :

If you want to set a delay between the elements to start the transition, you can use .queue()and .dequeue()as follows:

$("#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

Update

.end , $("#remove").click().

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

, clone . , .end $(this).addClass("end").

.

Answer 2

-, :

var clone;

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

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

$("#generate").click(function(){
    $("#parent").append(clone);
    setTimeout(function() {
        $("#parent").children("div").addClass("newChild");
    }, 30);

});

jsfiddle

Answer 3

newChild:

.newChild {
    background: red;
   -webkit-transition: background 4s;
   -moz-transition: background 4s;
   transition: background 4s;
}

Fiddle

Answer 4

, .delay(), .queue() and .dequeue() :

$("#generate").click(function(){
    $("#parent").append(clone);
    $("#parent").children("div").delay(1).queue(function() {
       $(this).addClass("newChild").dequeue();
    });
});