Css转换仅在超时函数内部显示

我已经使用JavaScript创建了新的div并设置了它的宽度和高度。紧接着，我需要将它调整到100％的宽度，并带有过渡效果。但只有当编辑样式在Timeout函数内时才会显示。没有它，只是跳到新的宽度。Css转换仅在超时函数内部显示

的CSS：

#project-detail { 
    @extend .project-detail-preview; 
    transition: width 0.25s ease-out, top 0.25s ease-out, left 0.25s ease-out, height 0.25s ease-out; 
}

脚本：

var detailContainer = document.createElement("div"); 
    detailContainer.id = "project-detail"; 
    detailContainer.innerHTML = previewContent.innerHTML; 
    detailContainer.style.width = previewWidth; 
    detailContainer.style.height = previewHeight; 

    blocksContainer.appendChild(detailContainer); 

    for (let project of source.projects) { 
    if(project.id == projectID) { 
     setTimeout(function() { 
     detailContainer.style.width = "100%"; 
     }, 1); 
    } 
    }

来源

2017-05-31 sapharick

我相信这是因为你追加DIV的DOM，并立即（下一行代码），你调整它的宽度为100％。

问题是，在页面的生命周期中，CSS没有时间追赶和应用这两行代码。所以，转换时间还没有被应用，并且你已经调整了div的大小，所以它立刻跳到100％。另一方面，当你设置一个Timeout，它是异步的时候，Timeout里面的函数在执行堆栈的末尾执行，也就是在将CSS规则应用到新创建的元素之后执行。你甚至可以设置0延时或者完全不延时，它的工作原理都是一样的。

来源

2017-05-31 11:37:12

期待沉默downvotes在3 ... 2 ... 1 ... –

好的，感谢您的解释！我花了大约四个小时才意外地发现这个解决方案..现在至少我知道它是如何工作:) – sapharick

很高兴我帮助！这是否值得赞扬和接受答案？ :) –

JS是单线程的，如果你改变宽度为20，再到100，改到20是一样，如果没有发生。所以你需要使用一个setTimeout（），所以它首先将它更改为20，“稍后”它更改为100

来源

2017-05-31 11:32:28 UXDart

我试图用JS做这样的事情，甚至读了一堆关于requestAnimationFrame的文章并理解，类似的事情更好地处理CSS类。尝试切换的动作类：

for (let project of source.projects) { 
    if(project.id == projectID) { 
     detailContainer.className += ' fullwidth-class'; 
    } 
}

并添加相同的CSS类：

.fullwidth-class { 
    width: 100%!important; 
} 
#project-detail { 
    animation-duration: 1s; 
}

来源

2017-05-31 11:35:19

不幸的是，同样的结果.. – sapharick

Css转换仅在超时函数内部显示

回答

相关问题