jquery - 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 添加到基本定义中，你会没事的。

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