CSS3 过渡不再在 Chrome 中工作答案

【问题标题】：CSS3 Transition not working in Chrome anymoreCSS3 过渡不再在 Chrome 中工作
【发布时间】：2014-02-03 05:21:42
【问题描述】：

据我所记得，到目前为止，CSS3 过渡对我来说没有任何问题。突然（可能是因为 chrome 更新或对我的代码进行了其他修改）它刚刚停止在 chrome（32.0.1700.77）中工作，但在所有其他浏览器（以及旧版本的 chrome）中仍然有效。

@media screen and (max-width: 1325px) {
    .row-offcanvas {
        position: absolute;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
        width: 100%;
    }

    button.toggle {
        display: inline-block;
    }

    .row-offcanvas-left,
    .sidebar-offcanvas {
        left: -239px;
        z-index: 9999;
        height: 700px;
    }
    .row-offcanvas-left.active {
        left: 239px;
    }
    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 239px;
    }
}

我没有对网站的这一部分进行任何更改，我无法解释为什么它可能突然不起作用。过渡适用于在单击按钮时滑出的面板，由这段 javascript 触发（不负责动画）。

$(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
});

【问题讨论】：

Chrome doesn't require -webkit- prefixes anymore。除此之外，没有更改任何功能。不过，您的 JS 和 CSS 都缺少一些花括号和括号。控制台日志中是否有任何警告或错误？ DOM 检查器中无法识别的属性？
@412 在我的复制/粘贴过程中会出现拼写错误。我很抱歉。
@NielsKeurentjes 缺少的大括号和括号只是复制/粘贴错别字。就功能而言，JS 执行（它应该触发活动类，打开面板）。唯一奇怪的部分是过渡突然不起作用。
我们需要比这更多的代码 - 你甚至没有包含 .active CSS 定义。此外，当所有相关代码也都在这里时，请随意分享链接，不允许提出仅链接的问题，但如果是附加链接，您可以添加链接，在这种情况下，如果没有它，我不知道如何提供帮助.
@NielsKeurentjes 我已经添加了上面所有的相关代码，现在。只是想这与问题无关。我将尝试将 JS 放在一起，实际代码位于开发服务器上经过身份验证的站点部分的后面。

标签： jquery css google-chrome css-transitions

【解决方案1】：

您的问题是您正在尝试从未定义的属性设置动画：您正在将left 更改为239px，但最初并未将其明确指定为0。因此它默认为auto，该值没有有效的平滑过渡到239px。

将left:0 添加到基本定义中就可以了。

See a JSfiddle here demonstrating your problem in Chrome 32+.

【讨论】：

您的 JSFiddle 显示两个栏同时移动，我使用的是 Chrome 31。我过去也这样做过，没有问题，从默认值（在此为 auto案例）。
他说他正在使用我也在运行的 Chrome 32 beta 版，其中只有一个在制作动画 - 他还说它以前可以工作，我知道这曾经是工作，但这实际上是 v32 中为更好地遵守标准而进行的修复。您在默认值上是正确的，已修复。
这个答案实际上似乎为我解决了这个问题。谢谢！
没错，我更新了 Chrome，我可以在 Chrome 32 中确认你的发现。
对我来说它有效，但动画在一分钟后开始。如此平静——等着吧。 ;-) 版本号 40.0.2214.94