CSS转换没有'当添加事件上隐藏的溢出时，不能在FF中工作

CSS transition doesn't work in FF when add overflow hidden on event

本文关键字：溢出 不能 工作 FF 隐藏 转换 事件 添加 CSS      更新时间：2023-09-26

我在溢出隐藏和CSS转换方面遇到了一些问题。在添加代码以在<body>元素上设置overflow: hidden之前，过渡动画工作正常。如果发生这种情况，过渡动画将不起作用；元素会立即发生变化。

请看这个例子：http://jsfiddle.net/Lg3q911b/2/

CSS：

#block {
    background: red;
    float: left;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 203px;
    height: 100%;
    transition: all 0.4s;
    transform: translate3d(-203px, 0, 0) scale3d(1, 1, 1);
}
#block.is-opened {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

HTML:

<div id="block"></div>
<a href="#" id="toggle">Toggle</a>

jQuery:

$(document).ready(function() {
    $('#toggle').on('click', function() {
       $('#block').addClass('is-opened');
        $('body').css('overflow', 'hidden');
    });
});

如果将overflow设置添加到<body>的行被注释掉，则动画会工作。

也许有人知道，怎么解决？

这是一个错误，已经为即将发布的版本修复了。

我可以用Firefox 32重现你的问题。

然而，在Firefox Nightly 35上，它运行良好。

相关文章：