CSS 전환이 적용되지 않습니다.

Question

간단한 체크 박스 스위치를 만들었습니다. 여기 JSFiddle : http://jsfiddle.net/aseVX입니다. 작은 원형 점프를 클릭하면 왼쪽에서 오른쪽으로 부드럽게 이동하려고합니다. 그리고 오른쪽에서 왼쪽으로. CSS 전환 추가를 시도했는데 제대로 작동하지 않았습니다. 내가 뭘 잘못하고 있는지 생각해? 표류이 코멘트에 말했듯이 당신은 폭이 설정되는 것을 특징으로하기 때문에

/*Checkbox Switch*/ 
.switch p, .switch label { 
    display: inline; 
} 
.switch label { 
    margin-left: 10px; 
} 
.switch label > span { 
    background-color: rgba(0, 0, 0, 0.1); 
    border: 1px solid #A6A6A6; 
    width: 50px; 
    height: 30px; 
    position: relative; 
    display: inline-block; 
    vertical-align: middle; 
    cursor: pointer; 
    border-radius: 50px; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    -webkit-transition: all .15s linear; 
    -moz-transition: all .15s linear; 
    -ms-transition: all .15s linear; 
    -o-transition: all .15s linear; 
    transition: all .15s linear; 
} 
.switch input[type="checkbox"]:checked + span { 
    background-color: #316C94; 
    border: 1px solid rgba(0, 0, 0, 0.4); 
} 
.switch span span { 
    background-color: #fff; 
    border: 1px solid #A6A6A6; 
    width: 24px; 
    height: 24px; 
    position: absolute; 
    top: 2px; 
    left: 2px; 
    cursor: pointer; 
    border-radius: 50px; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    -webkit-transition: all .15s ease; 
    -moz-transition: all .15s ease; 
    -ms-transition: all .15s ease; 
    -o-transition: all .15s ease; 
    transition: all .15s ease; 
} 
.switch label > span:hover span { 
    width: 30px; 
} 
.switch input[type="checkbox"]:checked + span span { 
    right: 2px; 
    left: auto; 
    border: none; 
} 
/*Checkbox Switch > Disabled*/ 
.switch input[type="checkbox"]:disabled + span { 
    background-color: rgba(0, 0, 0, 0.1) !important; 
    border: 1px solid #A6A6A6 !important; 
} 
.switch input[type="checkbox"]:disabled + span span, .switch input[type="checkbox"]:disabled + span span:hover { 
    background-color: #fff !important; 
    border: 1px solid #A6A6A6 !important; 
    width: 24px !important; 
} 

Answer 1

, 당신은 그렇게

처럼 폭에 맞는 왼쪽 값에 애니메이션을 적용 할 수 있습니다, auto

의 상태로 애니메이션 그러나 수 없습니다 또한

.switch input[type="checkbox"]:checked + span span { 
    left: 23px; 
    border: none; 
} 

Demo

난 변화를 체크 박스가 체크 된 left 위치를 첨가하고, 그 턴이었다 -moz-border-radius가 border-radius 그 중 하나 또한

같은 전환 또는 아무것도를 지원하지 않습니다 지원하지 않는 일 및 브라우저 적이 없기 때문에 border-radius에서 접두사 버전이 필요하지 않은

빨간색의 !important들 경우, 필요하지 않습니다 셀렉터의 우선 순위가 높거나 우선 순위가 같지만 스타일 시트 아래로 내려 가면 스타일이 자동으로 무시됩니다. 이는 CSS가 계단식 언어 인이므로 이전 스타일보다 스타일이 적용된다는 의미입니다. !important은 프로젝트가 커질 때 문제가 발생하므로 피해야합니다.