我正在用js创建一个宽度为0的html元素 我想将其转换为不同的宽度
这将显示转换(显然不可用)
element.style.transition = "all 0.4s ease";
element.style.width = 0;
alert(123);
element.style.width = 100;
这也行
element.style.width = 0;
setTimeout(open, 1, element); //having the width=100 in the function
这行不通
element.style.width = 0;
element.style.width = 100;
我想知道是否有一些我可以收听的事件 在其触发器上我可以应用新的尺寸并且过渡是可见的
settimeout 基本上是在做我想做的事情，但如果有事件或有不同的方式来执行此操作，我现在更愿意
P.S 对 Jquery 或任何类型的扩展不感兴趣
编辑-->
这里还有一些代码
x: function(){
document.addEventListener("mousemove", y);
},
y: function(){
t = document.getElementById("body");
d = document.createElement('div');
d.style.height = 100;
d.style.width = 100;
d.style.background ="#f00"
d.style.position = "absolute";
d.style.left = Math.floor(Math.random() * 1000);;
d.style.top = Math.floor(Math.random() * 1000);;
d.style.transition = "all 5s ease";
t.appendChild(d);
setTimeout(z, 100, d);
},
z: function(d){
d.style.background ="#00f";
}
将超时设置为 100 个接缝即可工作，将其设置为 10，它会错过一些设置，将其设置为 1，它会错过几乎所有 所以我的结论是，如果我将计时器设置为 1，它会在“某事”发生之前应用新颜色，并且没有过渡，但它是蓝色的 所以我正在寻找这个“东西” 像 addeventlistener("objectcreatedandcanbetransitioned") 那么如何执行上面的 OUT settimer 操作，并通过创建一个对象并在创建下一个对象时开始转换来消除一些作弊
最佳答案
事件列表为here
在下面的代码中，我将宽度设置为零。然后我有一个改变宽度的函数。我在 myBtn 上为 click 事件设置了一个事件监听器，但它可以是上面列表中的任何事件。第二个参数是事件发生时要调用的函数，即 callbackFunc() ，我在其中将宽度更改为 100。
<!DOCTYPE html>
<html>
<body>
<div id="element">My Header</div>
<p>Click the button to see the width change.</p>
<button id="myBtn">Try it</button>
<script>
document.getElementById("myBtn").addEventListener("click", callbackFunc);
var element = document.getElementById("element")
element.style.width = "0px";
element.style.overflow = "hidden";
function callbackFunc() {
element.style.backgroundColor = "blue";
element.style.width = "100px";
element.style.transition = "all 2s";
element.style.width = "100px";
}
</script>
</body>
</html>此外，您可能需要 overflow hidden
关于javascript - 使用js创建元素并添加过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42100514/