0

作業中のサイトの新しいオーバーレイ画面テクニックに取り組んでいます。JavaScriptアニメーションよりも簡単で高速なため、アニメーションをCSSに活用したいと思います。簡単なことをしていますが、ChromeやSafariなどのWebkitベースのブラウザで問題が発生しています。

これは私が使用しているコードです：

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 {
    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 に答える