javascript - 如何弹出放大动画？

Question

我需要使用纯 CSS 和 javascript 在弹出窗口上应用多种类型的动画。我知道我应该使用 transition 和 transform。但我在应用这个时遇到了一个问题。 (它没有给我动画)

这是我的尝试放大。

function zoomIn(){
document.getElementById('layout').classList.add('show');
}

.layout{
  position: fixed;
  inset:0;
  
  background: rgba(0,0,0,.7);
  
  display: none;
  transition: transform 250ms, opacity 400ms;
}
.layout img{
    position: absolute;
    top: 50%;  
    left: 50%; 
    transform: translate(-50%, -50%);
}
.show {
  display: block;
  transform: scale(1.2);
  opacity: 1;
}

<button onclick="zoomIn()" style="padding:20px">zoom in</button>

<div id="layout" class="layout">
<img src="https://media.istockphoto.com/illustrations/king-lion-aslan-illustration-id458017717?k=20&m=458017717&s=612x612&w=0&h=4qOseLgTPV5ZOEoZD2scNzf-LQ7AWoRXtbidR61OhG8=" width="400" />
</div>

Answer 1

遗憾的是，display none 和 block 属性无法设置动画。否则你的代码看起来不错，所以在这种情况下你需要使用 visibility:visible;和可见性:隐藏；。像这样:

function zoomIn(){
document.getElementById('layout').classList.add('show');
}

.layout{
  position: fixed;
  inset:0;
 visibility:hidden;
  background: rgba(0,0,0,.7);
  transition: transform 250ms, opacity 400ms;
}
.layout img{
    position: absolute;
    top: 50%;  
    left: 50%; 
    transform: translate(-50%, -50%);
   
}
.show {
  transform: scale(1.2);
    visibility: visible;
  opacity: 1;
}

<button onclick="zoomIn()" style="padding:20px">zoom in</button>

<div id="layout" class="layout">
<img src="https://media.istockphoto.com/illustrations/king-lion-aslan-illustration-id458017717?k=20&m=458017717&s=612x612&w=0&h=4qOseLgTPV5ZOEoZD2scNzf-LQ7AWoRXtbidR61OhG8=" width="400" />
</div>