CSS 过渡不适用于 Firefox答案

【问题标题】：CSS transition not working on FirefoxCSS 过渡不适用于 Firefox
【发布时间】：2015-01-02 11:59:15
【问题描述】：

我有一个初始位置为 left:-300px; 的 div #im1 当单击按钮 .abtme_link 时，javascript 会将其位置更改为 443px; 它适用于除 Firefox 之外的所有其他浏览器；我已经看过一些关于这个问题的其他帖子，但似乎无法让它发挥作用；其中一个线程得出结论，css 转换在 Firefox 上不起作用，如果是这样的话；有解决办法吗？

#im1{
    width:400px;
    position:absolute;
    left:-300px;
    transition:all .9s ease .5s;
    -webkit-transition:all .9s ease .5s;
    -moz-transition:all .9s ease .5s;
    -o-transition:all .9s ease .5s;
    -ms-transition:all .9s ease .5s;
}

$('.abtme_link').click(function() {
        $('#im1').css('left','443px');
    });

【问题讨论】：

你能为此制作一个 jsFiddle 吗？
在我的 mozilla 中，它的工作正常且动画也受 mozilla 支持。你能提供你读过的链接吗？
它在 Firefox in this example 中运行良好。顺便说一句，moz and opera prefixes aren't really needed anymore。 IE没有前缀，前缀属性应该在之前非前缀。
@roman - 这是been in firefox since version 4。如果他还在使用 3，他真的需要更新！
@misterManSam 我找到了解决方案。我只是在执行之前延迟了它并且它正在工作。谢谢你们的帮助。

标签： javascript jquery html css firefox

【解决方案1】：

好的，我找到了解决方案，

我在 JS 中添加了一个延迟功能，它工作正常。不知道为什么或如何，但它正在工作。

setTimeout(function(){
            $('.im1').css('left','443px');
        },10);

【讨论】：

好的，这是有道理的。延迟说明了 CSS 转换延迟。您也可以尝试在此处删除.5s 延迟：transition:all .9s ease /*.5s remove*/
是的，我会这样做。虽然我仍然不明白为什么我必须在 mozilla 而不是在其他浏览器中使用手动延迟。但同样，至少它现在正在工作，我终于可以睡觉了。 :)