使用display控制模态图片显隐时，CSS transform:scale属性失效问题

核心原因 #

• display: none 会直接将元素从文档流中移除，浏览器不会为该元素计算布局、渲染样式，也不会处理任何过渡动画——相当于元素直接"消失"，transform: scale 自然没机会生效。
• visibility: hidden 只是让元素不可见，但元素仍占据布局空间，浏览器会保留它的渲染状态，所以过渡动画（比如scale、opacity）能正常触发并执行。

你的代码里，关闭模态框时先设置scale(1,1)，紧接着就把display设为none，浏览器会把这两个操作合并成一次重绘，动画根本来不及播放；就算注释掉display:none，背景和按钮先隐藏，视觉上也达不到理想效果。

修复方案 #

改用 visibility + opacity 配合过渡动画，再通过transitionend事件在动画结束后做收尾处理（可选，优化性能）。

修改后的代码：

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">&#9746;</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

#container{
    width: 20%; height: 50%;
    margin: 70%; margin-top: 12%;
    position: absolute;
}
#container img{
    width: 100%; height: 100%;
    object-fit: cover;
}
#modalbackground{
    position: absolute;
    width: 100%;height: 100%;
    background-color: black;
    opacity: 0;
    visibility: hidden;
    z-index: +1;
    transition: all 0.3s ease;
}
#modalimg{
    width: 100px; height: 100px;
    position: absolute;
    top:45%; left: 45%;
    z-index: +1;
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease;
    transform: scale(1,1);
}
button{
    font-size: 2em;
    background-color: transparent;
    border: none;
    position: absolute;
    left: 85%; top: 5%; 
    color: white;
    z-index: +1;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-active #modalbackground,
.modal-active #modalimg,
.modal-active #butt{
    opacity: 1;
    visibility: visible;
}
.modal-active #modalimg{
    transform: scale(7,4);
}

JS

const container = document.getElementById("container");
const modalImg = document.getElementById("modalimg");
const body = document.body;

container.onclick = () => openModal();

function openModal() {
    body.classList.add("modal-active");
}

function modal(buttFlag) {
    if (buttFlag) {
        body.classList.remove("modal-active");
        // 动画结束后可选择做性能优化（可选）
        modalImg.addEventListener('transitionend', function handler() {
            modalImg.removeEventListener('transitionend', handler);
        }, {once: true});
    }
}

关键改动说明 #

1. 把所有display: none替换为visibility: hidden + opacity: 0，给元素添加过渡动画，让显隐过程有平滑过渡。
2. 用CSS类.modal-active统一控制模态框的显示/隐藏，避免JS直接操作大量样式，代码更简洁易维护。
3. 关闭时移除激活类，让元素自然执行过渡动画，不需要手动控制样式时序。

这样就能实现点击放大、关闭时缩小再隐藏的平滑效果了。

内容的提问来源于stack exchange，提问作者Sepehr