2

我正在使用由 JavaScript 滚动事件触发的 CSS 过渡来显示一个元素，但是这种过渡正在影响 Mac（10.6.8）上 Safari（5.1.7）和 Chrome（27.0.1453.93）中相邻元素的背景颜色) 这根本没有意义。我想我偶然发现了一个错误。

我仅使用以下精简代码在 Safari 中复制了该问题，并创建了一个 jsfiddle ( http://jsfiddle.net/5AEMF/ )，但该问题不会在该框架内发生：

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Opacity transition affecting color of adjacent element</title>
<style>
* {
    margin: 0;
    padding: 0;
}

#bar {
    height: 100px;
    background-color: #FF0000;
}

#content {
    opacity: 0;
    height: 9999px;
    background-color: #0000FF;
    -webkit-transition: opacity 0.25s ease-in-out;
    -moz-transition: opacity 0.25s ease-in-out;
    -o-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

#content.scrolled {
    opacity: 1;
}
</style>

<script type="text/javascript">
var scrolled = false;

var init = function() {
    onScroll(null);
    window.addEventListener('scroll', onScroll);
};

var onScroll = function(e) {
    if (window.scrollY > 0 && !scrolled) {
        scrolled = true;
        document.getElementById('content').className = 'scrolled';
    } else if (window.scrollY === 0 && scrolled) {
        scrolled = false;
        document.getElementById('content').removeAttribute('class');
    }
};

window.addEventListener('load', init);
</script>
</head>
<body>
<div id="bar"></div>
<div id="content"></div>
</body>
</html>

我想知道这个问题是否有解决方法。任何帮助将不胜感激。

4

1 回答 1

0

以 RGB 形式使用颜色，例如：color:rgba(255, 106, 0, 0.24)此属性中的最后一个参数 0.24 是不透明度。使其为0，它将是透明的。

于 2013-09-17T11:13:13.513 回答