转换在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;
}

- Dirk Nguyen

Answer 1

问题似乎出在伪元素上的"display: none"上。当切换显示时，FireFox 表现有些不同。解决方法是在两种状态下将它们都设置成可见，并切换它们的内容。此外，您需要设置一个 z-index，使开关位于": after"元素之上（特别是当内容 "OFF" 没有切换且文本保持可见时需要这样做）。 演示

用于切换文本：

.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-index：

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

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

"

并且显示切换被移除了。

在Chrome和Firefox中测试过。

"

- Jakub Kotrs