js给dom元素绑定transition导致过渡失效?

guapi233
  • 2
新手上路,请多包涵
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" >
        <meta name="viewport" content="width=device-width, initial-scale=1.0" >
        <title>Document</title>
        <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
let box = document.querySelector(".box");

let change = () => {
    box.style.transition = "3s";
    box.style.width = "700px";
};
// change()
document.addEventListener("click", change);
</script>

</html>

我想给box动态添加transition属性,执行change()后,没有渲染出过渡的效果。
但是如果不是直接执行change函数,而是将它绑到监听事件上,通过点击,却正常显示了过渡。
另外,如果我将change绑到事件上,不去点击而是通过js触发点击,依然不会触发过渡。

拜托大佬解惑。

回复
阅读 1.2k
1 个回答

要先声明 transition

    .box {
        width: 300px;
        height: 300px;
        background-color: red;
        transition: all 3s;
    }
    
    // 或者(理论上是可行的)
    let change = () => {
        box.style.transition = "3s";
        
        setTimeout(() => box.style.width = "700px", 100);
    };
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏