Question

我有问题要在firefox上覆盖转换延迟。下面的示例正如我在Chrome和IE中预期的那样，但在Firefox中，在动画之前它会延迟。在动画开始之前，我无法覆盖firefox上的转换延迟。我相信这是一个错误，但是这个问题的解决方法是什么？

这是Html代码

<button>move</button>
<div class="box"></div>

的Javascript

$('button').click(function(){
    $('.box').addClass('move').on('transitionend',function(){
        $(this).removeClass('move');
    });
});

和CSS

.box{
    height:100px;
    width:100px;
    background-color:yellow;
    transition:all 1s ease 1s;
    position:absolute;
    left:0;
}
.move{
    transition-delay:0;
    left:500px;
}

Answer 1

您只需要包含一个单位（在这种情况下为秒）：

.move {
    transition-delay: 0s; 
    left: 500px;
}

Updated fiddle

^{这个答案解释了原因：Units on "0s" Transition in Firefox}

覆盖Firefox上的转换延迟问题

1 个答案: