css - 过渡适用于 Chrome，但不适用于 Firefox

Question

过渡在 Google Chrome 上完美运行，但在 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未切换且文本保持可见时需要）。

演示

用于切换文本：

.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 中测试。