jquery - 如何添加 CSS 过渡以在自定义模式窗口上创建打开/关闭效果

Question

我有一个默认 display:none 的 DIV。它使用类overlay定义为:

.overlay
{
  display:none;
  position:absolute;
  top:0;
  left:0;
  z-index:200;
  width:100%;
  height:100vh;
  background:black;
}

单击一个按钮，我只需使用 jQuery 将其添加到以下类:

.open {
  display:block;
}

如您所见，它只是渲染为完整的窗口叠加层。

我想添加一些打开/关闭效果，而不是简单地切换它的 display 属性(淡入淡出或翻译，我还不知道是什么)。

我想使用 CSS 过渡，但如何以正确的方式添加它们？问题在关闭时显然更加明显，因为无论如何我都需要在关闭转换结束时应用 display:none;。

Answer 1

.overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.5s ease-in-out;
}

.open {
    display: block;
    opacity: 1;
    z-index: 200;
}

我没有尝试过，但据我了解，CSS3 不允许我们对显示属性进行动画处理。这就是为什么我添加不透明度并尝试改变一些样式。你试一试。也许尝试检查 gsap tweenmax。易于使用且性能更好。