css - Transition 适用于 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 未切换且文本保持可见时尤其需要)。

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-indexes:

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

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

并且显示切换被移除。

在 Chrome 和 firefox 中测试。