从屏幕上转换div的最佳方法是什么？

Question

我想要隐藏我的菜单并将其从屏幕上滑下来... css是内联反应，但它仍然是一样的。当div从屏幕上滑落时，我怎么能这样做呢？现在我只是将它从屏幕上移开但是因为它永远不会将显示改为'none'而只是坐在那里。

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;