Question

这个简单的css动画过渡适用于chrome（27）但在firefox（21）中直接跳转到最后。通过js顺序应用类。删除translateZ修复了firefox动画，但我认为它禁用了硬件加速。问题是，可能是ff bug还是css错了？

* {
    transform: translateZ(0px);
    -webkit-transform: translateZ(0px);
}
.box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: red;
    transition: all .2s ease;
}
.box.scale {
    transform: scale(1);
    -webkit-transform: scale(1);
}
.box.scale.now {
    transform: scale(0);
    -webkit-transform: scale(0);
}
// JS
$('.box').click(function() {
    $(this).addClass('scale')
    this.offsetWidth
    $(this).addClass('now')
})

Answer 1

<强> SOLUTION：

缩放到非零值，但小到足以隐藏项目，在firefox上工作正常（23）。

.box.scale.now {
  transform: scale(0.001);
  -webkit-transform: scale(0.001);
}

如果有人知道它为什么会发生，我们将不胜感激

Firefox的规模和硬件加速过渡问题

1 个答案: