动态添加的元素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) // 此处设不同延迟即可，具体要延迟多少可自行设定
}
}
发表评论 (审核通过后显示评论)：