画面からdivを切り替える最も良い方法は？

Question

私はメニューを隠して画面からスライドさせたいと思っています.cssはインラインで反応しますが、それは同じことです。私はそれがdisapears画面から滑り落ちるときにそれを作ることができます。今すぐ私は画面からそれをスライドさせますが、それは決してそこに座って '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;