显示不间断动画

Question

我希望在某些情况下显示某个 div，并且我希望它具有动画效果，一开始它应该是不可见的，所以...

.fixedNav{
    background-color: rgba(28,20,13, 0.75);
    position:fixed;
    color:white;
    width:60vw;
    margin-top:-50px !important;
    z-index: 1;
    display:none;
    opacity:0;
    transition:opacity .3s ease-in;
}

然后我通过使用 jquery 添加这个类来使用 css 为不透明度设置动画：

.fixedNavActive{
    display: block;
    opacity:1;
}

如果我删除显示，一切正常：无；从主类开始，如果我将它留在那里，那么不透明度不会被动画化，它只是出现，为什么它会破坏它，我怎样才能让它动画化不透明度而不是将其切换为 1？

Answer 1

基本上，您无法为显示属性设置动画，即使您只是尝试为 设置动画opacity，该过渡也会失败，因为当过渡开始时，该元素不存在。由于该display: none属性，它已从流程中删除。

您可以通过使用visibility: hiddenand实现您正在寻找的效果visibility: visible，这是一个可动画的属性，如果您需要在流中有效地从流中移除缺乏可见性的元素，那么您可以对元素应用 a max-heightof1px和 a margin-topof -1px。