CSSトランジションがトランスフォームで動作しない

Question

モバイルメニューのスムーズな移行を実現するにはどうすればよいですか？

私のサスはこの

.mobile-nav 
    display: none 
    position: relative 
    width: 100% 
    background: $white 
    padding: 30px 0 20px 
    transform: translateY(-100%) 

    @media (max-width: 775px) 
    .mobile-nav.is-o 
     display: block 
     transform: translateY(0%) 

Answer 1

のように見えます。.. transformプロパティが働いているが、私はそれがゆっくりと起こるしたいあなたが直面している主な障害はdisplayプロパティがアニメーション可能ではないということです。

ライトスイッチのように、display: noneはオフで、display: blockはオンです。ミドルグラウンド、フェード効果、CSS遷移はありません。

ただし、トランジションに使用できるその他のプロパティは複数あります。その中：

• height
• opacity
• z-index
• background-color

はここに例を示します

.mobile-nav-toggle { 
 
    font-size: 2em; 
 
    cursor: pointer; 
 
} 
 
.mobile-nav { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    width: 0; 
 
    height: 0; 
 
    opacity: 0; 
 
    transition: width 1s, height 1s, opacity 0s 1s, background-color 0s 2s; 
 
} 
 
.mobile-nav-toggle:hover + .mobile-nav { 
 
    width: 150px; 
 
    height: 150px; 
 
    opacity: 1; 
 
    background-color: lightgreen; 
 
    transition: 1s; 
 
}

<div class="mobile-nav-toggle">&#9776;</div> 
 
<div class="mobile-nav"> 
 
    <ul> 
 
    <li><a>Item</a></li> 
 
    <li><a>Item</a></li> 
 
    <li><a>Item</a></li> 
 
    </ul> 
 
</div>

参考文献：私は個人的に私は、全体の要素のための希望のようなフェード効果を達成するために視界と組み合わせる不透明を使用

• Full list of animatable properties in CSS
• Transitions on the display: property

Answer 2

。 Z-インデックスを操作することを忘れないでください。