Document
.box {
width: 300px;
height: 300px;
background-color: red;
}
let box = document.querySelector(".box");
let change = () => {
box.style.transition = "3s";
box.style.width = "700px";
};
// change()
document.addEventListener("click", change);
我想给box动态添加transition属性,执行change()后,没有渲染出过渡的效果。
但是如果不是直接执行change函数,而是将它绑到监听事件上,通过点击,却正常显示了过渡。
另外,如果我将change绑到事件上,不去点击而是通过js触发点击,依然不会触发过渡。
拜托大佬解惑。
回答
要先声明 transition:
.box {
width: 300px;
height: 300px;
background-color: red;
transition: all 3s;
}
// 或者(理论上是可行的)
let change = () => {
box.style.transition = "3s";
setTimeout(() => box.style.width = "700px", 100);
};