如何弹出放大动画？答案

【问题标题】：how to popup zoom in animation?如何弹出放大动画？
【发布时间】：2022-02-09 20:22:35
【问题描述】：

我需要使用纯 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>

【问题讨论】：

这里的好例子 - codepen.io/notdarryltec/full/YPOKdb loginradius.com/blog/async/animating-simple-css-popup-tutorial
使用 css 和 html 更好地实现弹出窗口
哦，抱歉@Thescion 该链接之前已为我破坏，所以我被重定向到另一个位置，我的错！

标签： javascript html css css-animations

【解决方案1】：

很遗憾，display none 和 block 属性无法进行动画处理。你的代码看起来不错，所以在这种情况下你需要使用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>

【讨论】：