CSS3 Transition不再在Chrome中运行了

Question

据我所知,到目前为止,我对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到基本定义,你会没事的.

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