Переход CSS не работает с преобразованием: перевод

Question

Как я могу реализовать плавный переход для своего мобильного меню?

Свойство transform работает, но я хочу, чтобы это произошло медленно ..

Мой Sass выглядит следующим образом

.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

Главное препятствие вы столкнулись, что 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-index, поэтому вы «скрытый» объект не будут доступны при нажатии, если они исчезнут.