Question

如果在更改附加了转换的属性之前将元素的display属性设置为block，则不会应用CSS转换。您可以在以下示例中看到该问题：

var dom = {};
dom.creative = document.getElementById('creative');
dom.creative.style.display = 'block';
dom.creative.style.opacity = 1;

#creative {
    display: none;
    opacity: 0;
    transition: opacity 2s; 
}

<div id="creative">
    <span>Sample text</span>
</div>

可以通过在元素上强制重绘来解决此问题：

    var dom = {};
    dom.creative = document.getElementById('creative');
    dom.creative.style.display = 'block';
    var a = dom.creative.offsetHeight; /* <-- forces repaint */
    dom.creative.style.opacity = 1;

#creative {
    display: none;
    opacity: 0;
    transition: opacity 2s; 
}

<div id="creative">
    <span>Sample text</span>
</div>

此解决方案并不好，因为每次需要显示转换组合时，它都需要非直观的额外代码行。

SO用户找到了一个优雅的解决方案（https://stackoverflow.com/a/38210213/6004250）来解决这个问题，取代了动画属性的转换。我仍然对使它与CSS转换一起工作感到好奇（因为它们更容易理解和使用）。有什么想法吗？

显示块和css转换的解决方法正常工作

0 个答案: