logo标签列表

CSS3过渡在Chrome中不再起作用

jquerycssgoogle-chromecss-transitions
7
据我所记，我一直没有遇到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不再需要-webkit-前缀了（http://caniuse.com/css-transitions）。除此之外，没有任何功能上的改变。但是你的JS和CSS都缺少一些花括号和括号。控制台日志中是否有任何警告或错误？DOM检查器中是否有未识别的属性？ - Niels Keurentjes
@412 在我的复制/粘贴过程中出现了笔误。请原谅我的错误。 - Jon Girard
@NielsKeurentjes 缺少的大括号和小括号只是复制/粘贴时的笔误。就功能而言，JS执行正常（它触发了活动类，打开了面板）。唯一奇怪的部分是过渡突然停止工作。 - Jon Girard
1
我们需要更多的代码 - 您甚至没有包括.active CSS定义。此外，如果所有相关代码都在这里，请随时分享链接，不允许只提供链接的问题，但是如果它是附加信息，您可以添加一个链接，在这种情况下，我看不到如何在没有链接的情况下帮助。 - Niels Keurentjes
@NielsKeurentjes，我已经在上面添加了所有相关的代码。只是觉得它与问题无关。我会尝试将JS fiddle整合在一起，实际的代码位于开发服务器的经过身份验证的部分。 - Jon Girard
它什么时候工作的？它什么时候停止工作的？此外，Chrome在“元素”面板中非常出色地显示了应用于元素的CSS属性，包括无效的属性名称或值。您是否已经检查了Chrome告诉您的内容？ - Jasper
1个回答
18
你的JSFiddle显示两个进度条同时移动，我使用的是Chrome 31。而且我以前也做过类似的事情，从默认值（在这种情况下是auto）开始进行动画效果，没有出现问题。 - Jasper
1
他说他正在使用Chrome 32 beta进行工作，我也在运行该版本，但只有其中一个正在执行动画 - 他还说以前可以正常工作，我知道这以前是可以的，但实际上这是v32中更好的标准兼容性修复。你对默认值是正确的，已经修复了。 - Niels Keurentjes
此答案实际上解决了我的问题。谢谢！ - Jon Girard
1
没错，我更新了Chrome，我可以确认你在Chrome 32中的发现。 - Jasper
对我来说它可以工作，但动画要等一分钟后才开始。所以冷静点 - 只需等待。;-) 版本号40.0.2214.94。 - B.F.
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接