如何弹出放大动画？

Question

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

这是我的尝试zoom in。

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

显示 none 和块属性不幸的是无法设置动画。你的代码看起来不错，所以在这种情况下你需要使用 visibility: visible; and visibility: hidden;。像这样：

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>

如何弹出放大动画？

how to popup zoom in animation?

html

javascript

css

css-animations