CSS3过渡在Chrome中不再工作 [英] CSS3 Transition not working in Chrome anymore

问题描述

据我记得，我没有任何问题的CSS3转换为我工作，直到现在。突然（可能是因为Chrome更新或我的代码的其他修改），它刚刚停止在chrome（32.0.1700.77），但仍然适用于所有其他浏览器（和旧版本的chrome）。

As far as I can remember, I didn't have any problems with the CSS3 transitions working for me, until now. Suddenly (possibly because of a chrome update or other modifications to my code) it has just stopped working in chrome (32.0.1700.77), but still works in all other browsers (and an older version of 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触发（不负责动画）。

I haven't made any changes to this part of the site and I can't explain why it might not work all of a sudden. The transition is for a panel which slides out when a button is clicked, triggered by this bit of javascript (not responsible for the animation).

$(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
});

推荐答案

您的问题是， undefined属性：您正在将左更改为 239px ，但不要显式指定为 0 。因此，它默认为 auto ，该值没有到 239px 的有效平滑过渡。

Your problem is that you are trying to animate from an undefined property: you are changing left to 239px, but don't explicitly specify it as 0 initially. It therefore defaults to auto, a value for which there is no valid smooth transition to 239px.

向基本定义中添加 left：0 即可。

Add left:0 to the base definition and you will be fine.

请参阅这里的JSfiddle演示您在Chrome 32+中的问题。

这篇关于CSS3过渡在Chrome中不再工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！