0

我正在为我正在开发的网站开发一种新的覆盖屏幕技术。我想利用 CSS 动画，因为它比 JavaScript 动画更容易、更快。我正在做一些简单的事情，但我在使用基于 webkit 的浏览器（如 Chrome 和 Safari）时遇到了问题。

这是我正在使用的代码：

body:after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
    opacity: 0;
}

body.dimmed:after {
    z-index: 9999;
    opacity: .7;
}

如您所见，它使用 after 伪元素，并根据 body 类对其进行动画处理以显示或隐藏它。它适用于 Firefox，但不适用于 Chrome 或 safari。在这些浏览器上，动画不会发生，并且变化是瞬时的，这不是我想要的。如果将相同的 CSS 应用到 body，而不是伪元素，动画会发生：

body {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
    opacity: 0;
}

body.dimmed {
    z-index: 9999;
    opacity: .7;
}

这让我觉得过渡不适用于 Chrome 上的伪元素。这应该报告为错误吗？

4

2 回答 2

1

这是一个已知的错误，多年来已为人所知：

https://bugs.webkit.org/show_bug.cgi?id=23209

http://code.google.com/p/chromium/issues/detail?id=54699

于 2012-10-19T09:09:43.700 回答
0

顺便说一句，目前您可以尝试使用这种技术： http: //kizu.ru/en/pseudos/ - 通过触发元素本身的转换，然后将值继承给伪元素。这不适用于每个属性（opacity例如），但您可以使用一些想象力来解决这个问题。

于 2012-10-19T20:40:05.187 回答