gpt4 book ai didi

javascript - 添加到 DOM 后触发过渡动画

转载 作者:行者123 更新时间:2023-11-29 15:39:21 24 4
gpt4 key购买 nike

我正在尝试向 DOM 添加一个元素,然后添加一个新类来触发过渡动画。

// -- 1 -- Circle Already is in the DOM
// <div class="circle circle1 hwaccel"></div>
$('.circle1').addClass("dropped"); // Works!

// -- 2 -- Circle is added to the DOM with jQuery
var $c = $('<div class="circle circle2 hwaccel"></div>').appendTo( $('body') );
$c.addClass("dropped");
// Doesn't animate. Also tried $c.toggleClass("dropped");

// -- 3 -- Circle is added to the DOM with vanilla JS
var circleClass = "circle circle3 hwaccel";
var circleElt = document.createElement("div");
circleElt.setAttribute("class", circleClass);
document.body.appendChild( circleElt );
circleElt.setAttribute("class", circleClass + " dropped");
// Doesn't animate. :(

我做错了什么? fiddle 在这里:http://jsfiddle.net/luken/DsLhJ/

最佳答案

必须有人用适当的术语来解释为什么这是必要的,但我可以解释你需要做什么。

您不能在同一操作中添加和应用样式。浏览器需要单独应用一个“开始”类和一个“结束类”。最简单的解决方法是将添加的类包装在 setTimeout 中。

所以改变这个:

var $c = $('<div class="circle circle2 hwaccel"></div>').appendTo( $('body') );
$c.addClass("dropped");

对此:

var $c = $('<div class="circle circle2 hwaccel"></div>').appendTo( $('body') );
setTimeout(function(){
$c.addClass("dropped");}
,0)

setTimeout 添加了将其添加到 dom 的操作与然后更改类之间的“断开连接”(同样,具有更多 JS 知识的人将不得不提供适当的技术解释来解释为什么这样做)。

关于javascript - 添加到 DOM 后触发过渡动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22263123/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com