我想做的是在应用 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);
});
我在这里做了一个完整的例子:
更新
再次添加类后我错过了检查结果,它没有按预期工作检查这个 fiddle http://jsfiddle.net/QeVF6/
取回克隆后,我添加了类,并立即应用了转换。
我需要的是应用过渡,但不是立即应用,我希望在新添加的克隆上看到相同的 4sec
效果。
最佳答案
使用 clone = $("#parent").children("div")
不会创建匹配元素的副本,而是将返回的列表存储到变量中。
为了创建匹配元素的副本,你应该使用.clone()
方法如下:
clone = $("#parent").children("div").clone();
更新
我假设您不想在克隆的元素上应用过渡。
如果你想在元素之间设置一个延迟来触发过渡,你可以使用.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
});
});
关于javascript - 在 CSS Transition 之前克隆元素返回应用了过渡的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22141758/