<!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 {
position: absolute;
left: 0;
width: 50px;
height: 50px;
border: 10px solid red;
transition: all 2s;
}
</style>
</head>
<button id="demo2">点击插入box</button>
<body>
<script>
demo2.onclick = function(){
let div = document.createElement('div')
div.classList.add('box')
document.body.appendChild(div)
//getComputedStyle(div,null).left
div.style.left = '500px'
}
</script>
</body>
</html>
注释解开才会有过渡效果，因为触发了重排，这我能理解。
但是document.body.appendChild(div)这个不是也触发了重排，为什么还得再重排一下，也就是说为什么注释不解开不会有过渡效果。
我觉得document.body.appendChild(div)只是第一次渲染，就是把div带着样式放在那里了
而transition需要他自己的触发时机，比如一个div你想要他transition，可以通过点击这个div