在CSS Transition返回应用了转换的元素之前克隆元素 [英] Cloning an Element before CSS Transition returns the Element with transitions applied

问题描述

我试图做的是在应用CSS3过渡之前克隆一些元素（添加类之前）。

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

与 .remove（），I .append（）克隆希望它将包含原始元素没有过渡效果

 < div id =parent> 
< div class =start> 
< / div> 
< / div> 
< input type =buttonvalue =1- Remove Elementsid =remove/> 
< input type =buttonvalue =2- Generateid =generate/> 
  

CSS

  .start {
 background：blue; 
 -webkit-transition：background 4s; 
 -moz-transition：background 4s; 
转换：background 4s; 
} 
 .end {
 background：red; 
} 
  

jQuery

  var clone =; 
 
 $（window）.load（function（）{
 clone = $（＃parent）。children（div）; 
 $（ ）.children（div）。addClass（end）; 
}）; 
 
 $（＃remove）。click（function（）{
 $（＃parent）。children（div）。remove（）; 
} ）; 
 
 $（＃generate）。click（function（）{
 $（＃parent）。append（clone）; 
} 
  

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

http://jsfiddle.net/Gv93G/

< h2> UPDATE

我在重新添加类后错过了检查结果，它不能正常工作检查这个小调 http://jsfiddle.net/QeVF6/

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

我需要的是应用转换，但不是瞬间，我想看到相同的 使用<$ c $ c> clone = $（＃parent）。children（div）不会创建匹配元素的副本，而是将返回的列表存储到变量中。

要创建匹配元素的副本，您应该使用 .clone（） 方法如下：

  clone = $ #parent）。children（div）。clone（）; 
  

UPDATED DEMO

。

更新

我是在这个假设下，你不想对克隆的元素应用转换。

如果你想设置元素之间的延迟来触发转换，可以使用 .queue（） 和 .dequeue（） 方法如下：

  $（＃generate）。click（function（）{
 $（＃parent）。 （clone）; 
 
 $（＃parent）。children（div）。delay（4000）.queue（function（）{
 $（this）.addClass end）。dequeue（）; //移动到下一个队列项目
}）; 
}）; 
  

工作演示

What I'm trying to do is to clone some elements before CSS3 Transitions are applied (before adding the class).

On $(window).load() I clone the elements and then add the new class which should kick the transitions.

After removing the previous elements with .remove(), I .append() the clone hoping it will contain the original elements without the transition effects, but this isn't what happening.

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

I made a full example here:

http://jsfiddle.net/Gv93G/

UPDATE

I missed checking the result after adding the class again, it doesn't work as expected check out this fiddle http://jsfiddle.net/QeVF6/

After fetching back the clone, I add the class, and the transitions are applied instantaneously.

What I need is to apply the transitions but not instantaneously, I want to see the same 4sec effect on the newly appended clone.

解决方案

Using clone = $("#parent").children("div") doesn't create a copy of the matched elements, but stores the returned list into a variable.

In order to create a copy of matched elements, you should use .clone() method as follows:

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

UPDATED DEMO.

Update

I was under this assumption that you don't want to apply the transition on the cloned elements.

If you want to set a delay between elements to trigger the transition, you can use .queue() and .dequeue() methods 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

这篇关于在CSS Transition返回应用了转换的元素之前克隆元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！