<!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触发点击,依然不会触发过渡。
拜托大佬解惑。
要先声明
transition
: