gpt4 book ai didi

javascript - 当在事件中添加隐藏的溢出时,CSS 转换在 FF 中不起作用

转载 作者:行者123 更新时间:2023-11-30 12:37:22 25 4
gpt4 key购买 nike

我在 overflow hidden 和 CSS 过渡方面遇到了一些问题。在将代码添加到集合 overflow: hidden 之前,过渡动画工作正常在 <body> 上元素。如果发生这种情况,过渡动画将不起作用;元素会立即发生变化。

请看这个例子: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 上,它运行良好。

关于javascript - 当在事件中添加隐藏的溢出时,CSS 转换在 FF 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25666578/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com