divに変換とトランジション効果を適用する方法

Question

an example i foundでCSSを実践していました。私はトランジション効果を持つnavの上にサブメニューを表示しようとしました。私はホバー上のサブメニューの位置を変更することができます。

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

私もトランジションエフェクトを追加するために、コードを変更：位置が変更

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

が、私はまったくトランジションエフェクトが表示されません。何が間違っているのですか？

Answer 1

以下のように変更してください。間違って書かれています。

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

移行はdisplayでは機能しません。代わりに以下の効果を使用してください。我々は（見えない）01に（目に見える）からauto（フルハイト）とopacityから0pxからheightを切り替えることができます

Codepen Demo

。 opacityにアニメーションしか表示されていないことがわかります。これが最も効果的です。

Answer 2

使用visibility:hiddenその後、visible

display: noneはアクティブDOMでそれを無効にし、このCSSを持つような要素は、アニメーションのように詰め込むために選択することはできません。

.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%); 
}