显示为none会破坏动画效果。

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;
}

如果我从主类中删除display: none;，那么一切都可以正常工作，如果我将它留在那里，那么不透明度就不会有动画效果，只是出现而已。为什么会破坏动画效果？我该如何使其动画化，而不是只是将其切换为1？

- user2209644

---

也许你应该看一下jQuery的fadeIn和fadeOut。这样可能会使它变得不那么复杂... - Sven van de Scheur

这是备选方案，但我希望它能够在CSS中实现，因为似乎它不那么“卡顿”。 - user2209644

“display” 无法进行动画处理。 - Albzi

如果您重新检查代码，您会发现我没有动画显示，我动画不透明度，显示用于确保元素对用户不可点击/可见/或以任何形式可用。 - user2209644

这可能会有所帮助：http://www.greywyvern.com/?post=337 - Paulie_D

Answer 1

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

您可以通过使用可动画化的visibility: hidden和visibility: visible属性来实现所需的效果，如果需要在缺少可见性时有效地将元素从流中移除，则可以将max-height应用于元素。1px和margin-top-1px。

- Gray Spectrum

---

可见性仅在延迟函数方面是可动画的。它只有两种状态，开/关，没有中间步骤。 - Paulie_D

那似乎与他/她的情况无关。他/她需要立即更改可见性属性，然后一旦可见性属性已更改，不透明度动画就可以开始了。 - Gray Spectrum

这是我的观点...你必须交错使用这两个链接: http://www.greywyvern.com/?post=337 - Paulie_D

好的，现在有意义了 =) 谢谢，我最终使用了可见性和不透明度，效果非常好。 - user2209644

Answer 2

我将"display:none;"放在元素内容上，或者将要隐藏的内容包裹在另一个div中。然后在周围的元素上设置转换效果。 为了让动画既淡入又淡出，您需要设置高度、填充或其他内容，以防止在内容消失的一瞬间高度变为0。

至少对我来说解决了这个问题 :)

.hidden { 
    opacity: 1;
    height:20px;
    transition: all 0.5s linear;
}

.container:hover > .hidden{
   opacity: 0;
   height:0;
   transition: all 0.5s linear;
}

.container:hover > .hidden > .hidden-content{
    display: none;
}

<div class="container">
  <div> Hello! </div> 
  <div class="hidden">
      <div class="hidden-content"> Goodbye! </div>
   </div>  
  <div> Some other text! </div>
</div>

- Ildrid

Answer 3

JSFiddle

display属性无法在CSS中进行动画处理。

您可以使用opacity:0;，然后使用opacity:1。

为了获得更好的效果，您可以始终使用visibility:hidden;。

- Albzi