当对使用 `display: none` 隐藏的元素应用 css `transform` 动画时，动画效果往往无法正常显示。这是因为 `display: none` 会将元素从渲染树中移除，导致浏览器无法在 `display` 属性切换时捕获动画的初始状态。解决此问题需要利用 javascript 的 `settimeout` 函数，在元素显示后短暂延迟再应用 `transform` 样式，确保浏览器有足够时间渲染元素，从而实现平滑的动画过渡。
理解 display: none 与 CSS 动画的冲突
在前端开发中，我们经常使用 CSS 的 display 属性来控制元素的可见性。其中，display: none 是一种常用的隐藏元素方式，它不仅使元素在视觉上不可见，更重要的是，它会将其从文档流中完全移除，不占据任何空间。
当一个元素被设置为 display: none 时，浏览器不会将其纳入渲染树（render tree）。这意味着，当通过 JavaScript 将 display 属性从 none 切换到 block（或其他可见值）时，浏览器会立即将元素渲染出来，而不会在渲染过程中捕获任何中间状态。
CSS transform 属性，尤其是配合 transition 属性使用时，依赖于元素在不同状态间的平滑过渡。如果元素在动画开始时并未存在于渲染树中，或者其初始状态未能被浏览器正确识别，那么 transform 动画就无法生效，元素会突然出现或消失，而非平滑过渡。
浏览器在处理 JavaScript 对样式进行更改时，通常会进行优化。它不会在每次样式更改后立即重新渲染，而是会将多个样式更改批处理，在短时间内一次性应用。因此，当你尝试同时设置 display: block 和 transform: scale(...) 时，浏览器可能会在元素显示时就直接应用最终的 scale 值，而跳过从初始 scale(1) 到最终 scale 值的动画过程。
立即学习“前端免费学习笔记（深入）”；
解决方案：利用 setTimeout 延迟 transform 应用
为了解决 display: none 与 transform 动画的冲突，核心思想是确保元素在应用 transform 动画之前，已经完全呈现在文档流中并被浏览器渲染。这可以通过 JavaScript 的 setTimeout 函数实现。
1. 元素显示时的动画
当需要显示并动画一个元素时，应遵循以下步骤：
- 首先，将元素的 display 属性设置为可见（例如 block）。
- 然后，使用 setTimeout 函数，在极短的延迟（例如 20 毫秒）后，再应用 transform 样式。这个短暂的延迟足以让浏览器完成元素的初始渲染，从而使其能够捕获到动画的起始状态。
示例代码：
element.style.display = 'block'; // 先显示元素
setTimeout(function() {
element.style.transform = 'scale(2)'; // 延迟应用 transform
}, 20); // 20ms 的延迟通常足够这里的 20 毫秒延迟是基于大多数屏幕刷新率（如 60Hz，约 16ms 刷新一次）的经验值，确保在下一个渲染周期开始前元素已经可见。
2. 元素隐藏时的动画
隐藏元素的动画过程与显示时类似，但顺序相反：
- 首先，应用 transform 样式，使其从当前状态过渡到隐藏前的最终状态（例如 scale(1)）。
- 然后，使用 setTimeout 函数，延迟时间应与 CSS transition 的持续时间相匹配。在动画完成后，再将 display 属性设置为 none。这样可以确保动画完整播放，而不是在动画进行中就被 display: none 提前中断。
示例代码：
element.style.transform = 'scale(1)'; // 先应用反向 transform
setTimeout(function() {
element.style.display = 'none'; // 动画结束后隐藏元素
}, 1000); // 假设 transition 持续 1000ms (1秒)实际案例：模态图像的缩放动画
结合上述原理，我们来优化一个模态图像的显示和隐藏逻辑。
HTML 结构：
<div id="modalbackground"></div>
<div id="container">
<img src="https://st4.depositphotos.com/11639344/22517/i/600/depositphotos_225179058-stock-photo-asian-rainforest-jungle-august.jpg" alt="jungle">
</div>
<button onclick="modal(true)" id="butt">☒</button>
<img id="modalimg" src="https://st4.depositphotos.com/11639344/22517/i/600/depositphotos_225179058-stock-photo-asian-rainforest-jungle-august.jpg" alt="jungle">CSS 样式：
关键在于为 #modalimg 添加 transition 属性，并设置初始 transform: scale(1)。
#container{
width: 20%; height: 50%;
margin: 70%; margin-top: 12%;
position: absolute;
}
#container img{
width: 100%; height: 100%;
object-fit: cover;
position: relative;
z-index: 5;
}
#modalbackground{
position: absolute;
width: 100%;height: 100%;
background-color: black;
opacity: 0.7;
display: none;
z-index: 10;
}
#modalimg{
width: 100px; height: 100px;
position: absolute;
top:45%; left: 45%;
z-index: 11;
display: none;
transform: scale(1); /* 初始状态 */
transition: transform 1s; /* 动画持续时间 */
}
button{
font-size: 2em;
background-color: transparent;
border: none;
position: absolute;
left: 85%; top: 5%;
color: white;
z-index: 12;
display: none;
}JavaScript 逻辑：
此 JavaScript 函数处理模态框的打开和关闭，并正确应用了 setTimeout 来协调 display 属性和 transform 动画。
document.getElementById("container").onclick = modal;
function modal(buttFlag) {
const modalimg = document.getElementById("modalimg");
const modalbackground = document.getElementById("modalbackground");
const butt = document.getElementById("butt");
// 打开模态框
if ( buttFlag !== true ) { // 不是关闭按钮触发
modalbackground.style.display = "block";
modalimg.style.display = "block";
butt.style.display = "block";
// 延迟应用 transform，确保元素已渲染
setTimeout( function() {
modalimg.style.transform = "scale(7,4)"; // 放大到目标尺寸
}, 20 );
}
// 关闭模态框
if ( buttFlag === true ) { // 是关闭按钮触发
modalimg.style.transform = "scale(1)"; // 缩小到初始尺寸
// 延迟隐藏元素，等待 transform 动画完成 (与CSS transition时间匹配)
setTimeout( function() {
modalimg.style.display = "none";
modalbackground.style.display = "none";
butt.style.display = "none";
}, 1000 ); // 1000ms 对应 CSS transition 的 1s
}
}注意事项与总结
- CSS transition 属性： 确保你的 CSS 中为要动画的属性（例如 transform）定义了 transition 属性，并设置了合适的持续时间。这是实现平滑动画的基础。
-
setTimeout 延迟时间：
- 显示动画： 20ms 是一个经验值，通常足以让浏览器渲染元素。在某些性能敏感或旧版浏览器环境中，可能需要微调。
- 隐藏动画： 延迟时间必须与 CSS transition 的持续时间完全匹配，否则动画可能在完成前中断或在元素隐藏后继续运行。
- 避免在 display: none 状态下应用动画： 核心原则是，当元素 display: none 时，它不参与布局和渲染。所有依赖于视觉状态变化的动画都必须在元素可见后才能启动。
- 替代方案：visibility 属性： 如果不需要元素完全从文档流中移除，可以使用 visibility: hidden 替代 display: none。visibility: hidden 会使元素不可见但仍占据空间，并且允许 transition 和 transform 动画直接生效，因为它始终在渲染树中。然而，如果元素不应占据任何空间，display: none 配合 setTimeout 仍然是更合适的解决方案。
通过理解 display: none 的工作机制并巧妙地利用 setTimeout，我们可以有效解决 CSS transform 动画在元素显示/隐藏时的冲突，从而实现更流畅、用户体验更好的动态效果。
