Question

我遇到溢出隐藏和CSS转换的问题。过渡动画可以正常工作，直到将代码添加到overflow: hidden元素上设置<body>。如果发生这种情况，过渡动画不起作用;元素立即改变。

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>的行已注释掉，则动画可以正常工作。

也许有人知道，如何解决？

Answer 1

这是一个已经针对即将推出的版本修复的错误。

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

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

当在事件上添加隐藏溢出时，CSS转换在FF中不起作用

1 个答案: