CSS3转换不再适用于Chrome

据我所知，直到现在，我还没有遇到任何与CSS3转换有关的问题。突然间（可能是因为Chrome更新或其他代码修改），它刚刚停止在chrome（32.0.1700.77）中工作，但仍然适用于所有其他浏览器（以及旧版本的chrome）。CSS3转换不再适用于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'); 
    }); 
});

来源

2014-01-14 Jon Girard

[Chrome不再需要'-webkit-'前缀]（http://caniuse.com/css-transitions）。除此之外，没有功能改变。尽管你的JS和CSS都缺少一些curlies和括号。控制台日志中是否有任何警告或错误？ DOM检查器中无法识别的属性？ –

@ 412在我的复制/粘贴过程中会出现错字。我很抱歉。 –

@NielsKeurentjes失踪的括号和括号只是复制/粘贴错别字。就功能而言，JS执行（它会触发活动类，打开面板）。唯一奇怪的部分是过渡突然不起作用。 –

你的问题是，你正试图从一个未定义的属性动画：您要更改left到239px，但并没有明确指定为0开始。因此它默认为auto，这是一个没有有效平滑过渡到239px的值。

将left:0添加到基本定义，你会没事的。

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

来源

2014-01-14 23:06:06

您的JSFiddle会同时显示两个条形图，我使用的是Chrome 31.此外，我在过去没有做过这样的事情，它使用默认值（本例中为“auto”）进行动画。 – Jasper

他声称他正在使用Chrome 32测试版，这也是我正在运行的版本，并且其中只有其中一个是动画设计 - 他也说过它曾经工作过，而且我知道这用于工作，但实际上这是一个修复v32以达到更好的标准合规性。你对默认值是正确的，修正了这个问题。 –

这个答案似乎为我解决了这个问题。谢谢！ –

CSS3转换不再适用于Chrome

回答

相关问题