覆盖 Firefox 上的转换延迟问题答案

【问题标题】：Overriding transition-delay issue on Firefox覆盖 Firefox 上的转换延迟问题
【发布时间】：2014-04-08 01:26:13
【问题描述】：

我在覆盖 Firefox 上的转换延迟时遇到问题。下面的示例在 Chrome 和 IE 中按我的预期工作，但在 Firefox 中，在动画之前它会延迟。在动画开始之前，我无法覆盖 Firefox 上的转换延迟。我相信这是一个错误，但是这个问题的解决方法是什么？

这里是jsfiddle link

这里是 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;
}

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

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

Updated fiddle

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

【讨论】：

你是对的，它运作良好。我无法猜到这一点，因为它在其他浏览器中运行良好，而且如果我们使用零值，通常使用单位是多余的。