Comment appliquer l'effet de transformation et de transition sur un div

Question

Je pratiquais le CSS sur an example i found. J'ai essayé d'afficher le sous-menu au-dessus du nav avec des effets de transition. Je peux changer la position du sous-menu sur vol stationnaire:

nav li:hover .menu-sub { 
    display: block; 
    transform: translateY(-100%); 
} 

J'ai aussi modifié le code pour ajouter un effet de transition:

.menu-sub { 
    position: absolute; 
    left: 0; 
    background: #444; 
    width: 100%; 
    display: none; 
    color: #fff; 
    padding: 2em; 
    -webkit-transition: -webkit-transform 1.5s ease; 
    -moz-transition: -moz-transform 1.5s ease; 
    -o-transition: -o-transform 1.5s ease; 
    transition: transform 1.5s ease; 
} 

La position a changé, mais je ne vois aucun effet de transition du tout . Qu'est-ce que je fais mal ?

Answer 1

S'il vous plaît modifier la transition à l'illustration ci-dessous, il a été écrit mal.

.menu-sub { 
    position: absolute; 
    left: 0; 
    background: #444; 
    width: 100%; 
    opacity:0; 
    overflow:hidden; 
    box-sizing:border-box; 
    height:0px; 
    color: #fff; 
    -webkit-transition: opacity 1.5s ease-out; 
    -moz-transition: opacity 1.5s ease-out; 
    -o-transition: opacity 1.5s ease-out; 
    transition: opacity 1.5s ease-out; 
} 

Transition ne fonctionne pas avec display, utilisez plutôt l'effet ci-dessous.

Codepen Demo

Là où nous pouvons passer le height 0px- auto (hauteur) et opacity de 0 (invisible) à 1 (visible). Vous pouvez voir que nous ne voyons que l'animation sur opacity, cela produira le meilleur effet.

Answer 2

Utilisez visibility:hidden puis visible

display: none désactive dans les DOM actif et ces éléments avec ce CSS ne peut pas être sélectionné pour des étoffes comme des animations.

.menu-sub { 
    position: absolute; 
    left: 0; 
    background: #444; 
    width: 100%; 
    visibility: hidden; 
    color: #fff; 
    padding: 2em; 
    transition: transform 1.5s ease; 
} 
nav li:hover .menu-sub { 
    visibility: visible; 
    transform: translateY(-100%); 
}