CSS에 애니메이션 탐색 요소 :

Question

를 가져 I 표준 중첩 된 UL의 탐색 구조와 :hover에 하위 NAVS 애니메이션을 몇 가지 CSS ...

이 바이올린을 참조하십시오 있습니다 http://jsfiddle.net/5kwsV/

모든 것이 예상대로 작동하는지 가장 깊은 UL의 애니메이션은 예외입니다. 첫 번째 subnav는 높이를 움직이게하고 두 번째 subnav는 너비 만 움직이게합니다.

다음은 문제가있는 가장 깊은 UL의 애니메이션을 처리하는 코드입니다.

nav ul li > ul > li > ul { 
    position: absolute; 
    display: block; 
    visibility: hidden; 
    width: 0px; 
    height: auto; 
    top: 0; 
    left: 100px; 
    padding: 0; 
    margin: 0; 
    -webkit-transition: all 0.6s ease; 
     -moz-transition: all 0.6s ease; 
     -ms-transition: all 0.6s ease; 
     -o-transition: all 0.6s ease; 
     transition: all 0.6s ease; 
} 

nav ul li > ul > li:hover > ul { 
    position: absolute; 
    display: block; 
    visibility: visible; 
    width: 100px; 
    height: auto; 
    top: 0; 
    left: 100px; 
    padding: 0; 
    margin: 0; 
    -webkit-transition: all 0.6s ease; 
     -moz-transition: all 0.6s ease; 
     -ms-transition: all 0.6s ease; 
     -o-transition: all 0.6s ease; 
     transition: all 0.6s ease; 
} 

이제 위의 코드의 문제는 "마이클"탐색 라벨 유혹 할 때, 폭과 높이가 애니메이션이다. 너비 만 애니메이션으로 만들어야합니다. 솔루션이 상당히 명백한 것처럼 보일 것입니다. "all"을 "width"로 변경하십시오. 떠오르게 때이 변경

실리콘 ... 이에

-webkit-transition: all 0.6s ease; 
     -moz-transition: all 0.6s ease; 
     -ms-transition: all 0.6s ease; 
     -o-transition: all 0.6s ease; 
     transition: all 0.6s ease; 

...

-webkit-transition: width 0.6s ease; 
     -moz-transition: width 0.6s ease; 
     -ms-transition: width 0.6s ease; 
     -o-transition: width 0.6s ease; 
     transition: width 0.6s ease; 

이제 애니메이션은 정상적으로 0 폭 100 픽셀에 대한 애니메이션. 새로운 문제는 내가 다른 nav 라벨로 이동할 때, 100px에서 0px로 애니메이션을 적용해야하지만, 대신 단지 깜박입니다.

무엇이 누락 되었습니까? 그럴 수 없다는 것을 알기에 그것의 무언가는 어리석게 분명하다.

Answer 1

또한 백그라운드 속성을 전환 중입니다. 이는 조상에서 선언 되었기 때문에 명확하지 않으며 상속됩니다. 마우스를 올리면 배경이 중간에서 바뀌고 너비가 바뀌는 것을 볼 수 있습니다. 마우스를 가져갈 때 배경이 중간에서 바뀌고 너비 전환이 표시되지 않습니다.

당신은 수행해야합니다

transition-property: background, width; 
transition-duration: 0.6s; 
transition-timing-function: ease; 

모든 공급 업체 접두사로, 물론.

불필요한 많은 속성을 반복하기 때문에 코드를 디버그하기가 어렵습니다. 기본 상태와 동일 할 때 호버 상태로 속성을 선언하지 마십시오. 실제로 쓸모가 없으며 실제로 변경 내용을 파악하기가 더 어려워집니다. (그냥 조언, 당신이 생각하지 않았 으면

updated demo