从屏幕转换div的最佳方法？

Question

我想隐藏我的菜单并将其从屏幕上滑出.css是内联的反应，但它仍然是同样的事情。我该如何做到这一点，当div从屏幕上消失时，它现在我只是从屏幕上滑下来，但因为它永远不会将显示更改为“无”，它只是坐在那里。

slideFromBelow: { 
      displayed: { 
       display: 'block', 
       top: 0, 
       transition: "top 500ms ease-in-out 0s" 
      }, 
      hidden: { 
       display: 'block', 
       top: "100%", 
       transition: "top 500ms ease-in-out 0s" 
      } 
     }, 

Answer 1

这是怎么回事？

.container { 
 
    width: 400px; 
 
    height: 300px; 
 
    position: relative; 
 
    background-color: red; 
 
    overflow: hidden; 
 
} 
 

 
.slideFromBelow { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
    position: absolute; 
 
    top: 100%; 
 
    transition: all 1s ease; 
 
} 
 

 
.container:hover .slideFromBelow{ 
 
    top: 0; 
 
}

<div class="container"> 
 
    <div class="slideFromBelow"> 
 
    
 
    </div> 
 
</div>

或者你可以把它无形的，把它放在后面

visibility: hidden; 
z-index: -1;