CSS 전환이 transform과 함께 작동하지 않습니다. translate

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 전환이 없습니다.

그러나 전환에 사용할 수있는 다른 여러 속성이 있습니다.

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

,129 :

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

은 예입니다 : 그 (것)들의 사이에서

참고 : 나는 모든 요소에 대해하고 싶은처럼

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

Answer 2

내가 개인적으로 페이드 효과를 달성하기 위해 가시성과 함께 불투명를 사용합니다. z- 인덱스을 조작해야합니다. 따라서 "숨겨진"오브젝트는 삭제할 때 클릭 할 수 없습니다.