Question

转换在Google Chrome上完美运行，但在Firefox上它不会动画：

任何想法如何解决这个问题？

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

Transition适用于Chrome，但不适用于Firefox

1 个答案: