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

我有DIV，默认display:none。它采用定义为类overlay：如何添加CSS转换以在自定义模式窗口上创建打开/关闭效果

.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;。

来源

2016-09-30 Luca Detomi

这个问题可以帮助你：http://stackoverflow.com/questions/7302824/animating-addclass-removeclass-with-jquery – adamk22

如果你不知道你想要什么样的影响但这太宽泛了。 –

我可以理解你在说什么，但不同意。我要求的是一般原则，而不是完整的解决方案。主要问题是如何结合需要切换'display'和'block'来转换其他属性。正如在User1111的解决方案中将'z-index'从'-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。易于使用，并在性能方面更好。

来源

2016-09-30 10:02:59

非常有趣和简单的解决方案。默认情况下，关键是'z-index：-1'。只是一个平庸：有必要删除'display：none'和'display：block'。我不知道为什么，但使用这些属性，透明度转换也不起作用（至少在Firefox中） –

另外，它肯定能够解决“开放”问题。在关闭时也需要进行转换以将其设置为所有属性，例如：'transition：all 0.5s ease-in-out;' –

@LucaDetomi也许，您是对的。我一直在做的是在tweenmax中使用oncomplete函数来更改显示值。也许只是删除显示，因为您已经切换z-index。随你便。取决于你希望你的系统如何工作。欢呼 – 2016-10-01 02:40:07

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

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

来源

2016-09-30 10:20:57 adamk22

我知道这一点，但正如我写的，我想使用CSS转换来获得最佳性能 –

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

回答

相关问题