过渡适用于 Chrome，但不适用于 Firefox答案

【问题标题】：Transition works on Chrome but not working on Firefox过渡适用于 Chrome，但不适用于 Firefox
【发布时间】：2013-10-02 08:14:54
【问题描述】：

过渡效果在 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;
}

【问题讨论】：

标签： css css-transitions

【解决方案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 中测试。

【讨论】：