La meilleure façon de faire une transition hors de l'écran?

Question

Je veux cacher mon menu et le faire glisser de l'écran .. le css réagit en ligne mais c'est toujours la même chose. Comment puis-je faire en sorte que lorsque la div glisse sur l'écran, il disparaît ... en ce moment je viens de le faire glisser sur l'écran, mais parce qu'il ne change jamais l'affichage à «aucun», il se trouve juste là.

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

Que pensez-vous de cela?

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

Ou vous pouvez le rendre invisible et de le mettre dans le dos

visibility: hidden; 
z-index: -1;