CSS3 Transition不再在Chrome中运行了

据我所知，到目前为止，我对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'); }); }); 

Answer 1

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

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

在这里查看JSfiddle，在Chrome 32+中演示您的问题 。