Question

我有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;。

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。易于使用，性能更好。

Answer 2

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

请参阅：http://api.jquery.com/show/＆amp; http://api.jquery.com/hide/

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

2 个答案: