将div转出屏幕的最好方法？

Question

我想隐藏我的菜单，然后把它从屏幕上移走..css是内联react，但它仍然是一样的东西。当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;