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？

Answer 1

基本上，您无法为显示属性设置动画，即使您只是尝试为不透明度设置动画，该转换也会失败，因为转换开始时，该元素不存在。由于display：none属性，它已从流中删除。您可以通过使用visibility来实现您正在寻找的效果：hidden和visibility：visible，这是一个可动画的属性，如果您需要在缺少可见性时有效地从流中删除元素，那么您可以应用最大值 - 1px到元素的高度和-1px的margin-top。如果您需要更多的分类，请告诉我。

Answer 2

JSFiddle

display属性无法在CSS中设置动画。

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

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

Answer 3

我放置“ display：none;”在元素的内容上，或将我想隐藏的内容包装在另一个div中。然后在周围元素上设置过渡。要让动画淡入淡出，您必须设置高度，内边距或其他东西以防止动画在高度消失后第二秒消失。

至少为我解决：)

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

display none打破动画

3 个答案: