CSS3 전환, 자식 요소에서 애니메이션을 트리거 할 때 마우스를 움직일 때

Question

내 목록 항목을 마우스로 가리키면 자식 항목 .pusher에 CSS3 전환이 트리거되기를 바랍니다. 나는 내가 그것을 어떻게 이해 생각 다른 SO 질문을 읽은 후, JS가 아니라 CSS3 전환에이 일을하는 데 사용하고 있지만 제대로 작동하지 않습니다 :

#sidebar ul { 
    float: left; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 100%; 
} 
#sidebar ul li { 
    padding: 20px; 
    position: relative; 
    list-style: none; 
    border-bottom: 1px solid #4a4a4a; 
    cursor: pointer; 
    -webkit-transition: max-width 0.5s ease; 
    transition: max-width 0.5s ease; 
} 
#sidebar ul li a { 
    color: #fff; 
    z-index: 5; 
    position: relative; 
} 
#sidebar ul li a:hover { 
    text-decoration: none; 
} 
#sidebar ul li:hover > .pusher { 
    max-width: 100px; 
    height: 100%; 
    background: #383838; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1; 
} 
#sidebar ul li:first-child { 
    border-top: 1px solid #4a4a4a; 
} 

미는 실제로 리튬에 추가되고, JS와,하지만이 문제가 발생해야한다고 생각하지 않아? (편집 :이 문제로 나타나지 않습니다)

바이올린 : http://jsfiddle.net/8KpQW/

Answer 1

당신은 .pusher의 폭을 정의하지 않은 단순히 max-width 그래서이 있어야하는데 너비를 알 수 없습니다.

이

JSFiddle Demo

CSS 추출물

.pusher { 
    width:0; 
    transition:width 0.5s ease; 
} 

#sidebar ul li:hover .pusher { 
    width: 100px; 
    height: 100%; 
    background: #383838; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1; 
} 

Answer 2

을 시도 아래 코드는 나를 위해 문제를 해결 :

#sidebar { 
    height: 100%; 
    margin-top: 74px; 
    background: #303030; 
    color: #fff; 
} 
#sidebar ul { 
    float: left; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 100%; 
} 
#sidebar ul li { 
    padding: 20px; 
    position: relative; 
    list-style: none; 
    border-bottom: 1px solid #4a4a4a; 
    cursor: pointer; 
} 
#sidebar ul li a { 
    color: #fff; 
    z-index: 5; 
    position: relative; 
} 
#sidebar ul li a:hover { 
    text-decoration: none; 
} 
#sidebar ul li .pusher { 
    height: 100%; 
    width: 0px; 
    background: #383838; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: 1; 
    -webkit-transition: width 0.2s ease-in-out; 
    -moz-transition: width 0.2s ease-in-out; 
    -o-transition: width 0.2s ease-in-out; 
    transition: width 0.2s ease-in-out; 
} 
#sidebar ul li:hover > .pusher { 
    width: 100%; 
} 

전환 속성에 적용 할 필요가있다 행위 호버 트리거 요소가 아닌 애니메이션 될 요소. 마우스를 올리면 애니메이션이 종료 될 속성 값을 포함하기 만하면됩니다.

바이올린 : http://jsfiddle.net/8KpQW/3/