過渡工作於Chrome，但不工作的Firefox

Question

的過渡工作完全在谷歌瀏覽器，但在Firefox它只是將無法運行動畫：

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的行爲有點不同。解決方法是使它們在兩種狀態下均可見並切換其內容。此外，您還設置了一個z-index，以便該開關超過:after元素（特別是當內容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都經過測試。