动态增加的元素transiton失效

function creatEl(){  let box = document.getElementById('box');  for(let i=0;i<4;i++){    let el=doucument.creatElement('div')    el.classList.add('li')    el.text(i)    box.appendChild(el)    el.style.opacity = '1'  }}

乍一看没啥问题，创立元素后append到box元素，再设opacity为1，class li,其中有设transition属性，这里省略不写了。此时调用函数，该出现transition效果，然而并没有。

1. 起因：从创立元素到append再到设opacity，因为因为渲染引擎的优化，浏览器只触发了一次渲染，所以不会有动画。

2. 处理办法：用setTimeout强制触发浏览器重绘

function creatEl(){  let box = document.getElementById('box');  for(let i=0;i<4;i++){    let el=doucument.creatElement('div') // 此处肯定用let，具体起因明白块的概念的应该都懂    el.classList.add('li')    el.text(i)    box.appendChild(el)    setTimeout(()=>{ // 用setTimeout强制触发浏览器重绘        el.style.opacity = '1'    },0)  }}

3.如若想要动态创立的元素一个一个浮现

function creatEl(){  let box = document.getElementById('box');  for(let i=0;i<4;i++){    let el=doucument.creatElement('div')    el.classList.add('li')    el.text(i)    box.appendChild(el)    setTimeout(()=>{        el.style.opacity = '1'    },200*i)  // 此处设不同推迟就可，具体要推迟多少可自行设定  }}