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

Posted 2023-05-08

【中文标题】如何添加 CSS 过渡以在自定义模式窗口上创建打开/关闭效果

【英文标题】：How to add CSS transitions to create open/close effect on a custom modal window

【发布时间】：2017-02-08 20:46:59

【问题描述】：

我有一个DIV，默认为display:none。它使用类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;。

【问题讨论】：

这个问题可能对你有帮助：***.com/questions/7302824/…

如果你不知道你想要什么效果，但是这太宽泛了。

我能理解你在说什么，但不同意。我要求的是一般原则，而不是完整的解决方案。主要问题是如何结合需要为display 切换none 和block 并转换其他属性。正如 User1111 的解决方案所评论的那样，将 z-index 从 -1 更改为可能似乎是正确的技巧

【参考方案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 中的理解是我们不允许为 display 属性设置动画。这就是为什么我设置不透明度并试图改变一些风格。试试看嘛。也许尝试检查 gsap tweenmax。易于使用且性能更佳。

【讨论】：

非常有趣且简单的解决方案。默认情况下，密钥为z-index:-1。只是一个惩罚：必须删除display:none 和display:block。我不知道为什么，但是有了这些属性，不透明度转换也不起作用（至少在 Firefox 中）

另外，它确实解决了“打开”的问题。要在关闭时也有过渡，必须将其设置为所有属性，所以：transition: all 0.5s ease-in-out;

@LucaDetomi 也许，你是对的。我一直做的是在 tweenmax 中使用 oncomplete 函数来更改显示值。也许只是删除显示，因为您已经切换了 z-index。由你决定。取决于您希望系统如何工作。干杯

【参考方案2】：

您可以使用 show(x) jQuery 函数，其中 x 是您希望淡入淡出持续的毫秒数。和.hide() 隐藏元素。

见：http://api.jquery.com/show/ & http://api.jquery.com/hide/

【讨论】：

我知道这一点，但正如我所写，我想使用 CSS 过渡来获得最佳性能

【参考方案3】：

如果您想对打开/关闭事件使用过渡，则必须使用可见性而不是显示。实际上这个问题在下面的帖子中得到了彻底的讨论：

What is the difference between visibility:hidden and display:none?

您的答案在 Michael Deal 的一条评论中：

在谈论可见性与显示时，务必牢记 css-transitions。例如，从可见性切换：隐藏；能见度：可见；允许使用 css-transitions，而从 display: none 切换；显示：块；才不是。 visibility: hidden 具有不捕获 javascript 事件的额外好处，而 opacity: 0;捕获事件。 – 迈克尔·迪尔