전환은 크롬에서 작동하지만 전환은 구글 크롬에서 완벽하게 작동 파이어 폭스

Question

에 작동하지 않는,하지만 파이어 폭스에 그냥 애니메이션되지 않습니다

jsfiddle

모든 아이디어를 어떻게이 문제를 해결하려면?

.switch_wrap .switch .bullet { 
    -webkit-transition: left 0.1s linear; 
    -moz-transition: left 0.1s linear; 
    -ms-transition: left 0.1s linear; 
    -o-transition: left 0.1s linear; 
    transition: left 0.1s linear; 
} 

Answer 1

문제는 의사 요소에 dispalay: none와 것 같다. 디스플레이를 전환 할 때, FireFox는 조금 다르게 동작합니다. 해결 방법은 두 상태에서 모두 보이게하고 내용을 전환하는 것입니다. 또한 스위치가 :after 요소를 초과하도록 Z- 색인을 설정합니다 (내용이 OFF이 전환되지 않고 텍스트가 계속 보이는 경우에만 필요합니다). 스위칭 용 텍스트

DEMO

:

.switch_wrap .switch::before, 
.switch_wrap .switch::after { 
    content: ''; <-- changed here 
} 

.switch_wrap .switch::after { 
    /*content: '';*/ <-- removed here 
    display: block; 
    right: 0; 
} 

.switch_wrap input[type="checkbox"] + .switch:after { 
    content: 'OFF'; 
} 

.switch_wrap input[type="checkbox"]:checked + .switch:after { 
    content: ''; 
} 

.switch_wrap input[type="checkbox"]:checked + .switch:before { 
    content: 'ON'; 
} 

다음에 z-인덱스 :

.switch_wrap .switch::before, 
.switch_wrap .switch::after { 
    /* ... */ 
    z-index: -1; 
} 

.switch_wrap .switch { 
    /* ... */ 
    z-index: 16; 
} 

디스플레이 토글 링이 제거된다.

Chrome과 firefox에서 모두 테스트되었습니다.