2

DIV をフェードアウトし、そのサイズをゼロに縮小するアニメーションを作成しました (アニメーションでは display: none; を使用できないため)。アニメーションは Google Chrome と FireFox では問題なく動作しますが、Internet Explorer 10 では、アニメーションが完了するまでページの読み込みが停止するようです。したがって、通常、DIV はページの読み込み中に他のすべてのものとともに表示されるはずであり、3 秒の遅延の後、ページの残りの部分がスライドして空白を埋めるようにフェードアウトして縮小します。ただし、IE10 では、DIV は表示されますが、DIV の下の残りのコンテンツは表示されません...空白の空白だけです。数秒後、DIV がフェードアウトし始めると同時にコンテンツが読み込まれます。

最初は、「animation-delay: 3s」もページの読み込みを遅らせていると思ったので、アニメーションを遅延を使用しないように変更してみましたが、最初は DIV に変更がなかったキーフレームが増えただけでした。 0 ～ 66%、次に 66 ～ 88 でフェードアウトし、88 ～ 100 で縮小します。これは問題を解決せず、この新しいアニメーションは chrome/firefox でも正常に機能しましたが、IE10 でも同じ問題が発生しました。

以下は私のコードです。1つの解決策はdivを非表示にすることであり、ページの読み込み時にJavaScriptでCSSを変更してDIVを表示し、アニメーションでクラスを追加することができることを理解しています...ただし、CSSのみでこれを解決したいと思います。このアニメーションは、私が開発している Web アプリ全体で使用されているため、JavaScript を使用すると、アニメーションを使用するすべての人に作業が追加されます。

Razor ビュー、.net 4.5、および Bootstrap CSS で Asp.Net MVC 4 を使用する

NOTE: I used Visual Studio w/ Web Essentials to copy vendor specifics, so all the vendor specific CSS has identical values for everything.

.successFadeOut {
    display: block !important;
    animation: successFadeOutAnimation;
    animation-duration: 1.5s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
}

@keyframes successFadeOutAnimation {
    0% {
        opacity: 1;
        height: auto;
        padding-top: 8px;
        padding-bottom: 8px;
        margin-top: 0px;
        margin-bottom: 20px;
        line-height: 20px;
    }

    70% {
        opacity: 0;
        height: auto;
        padding-top: 8px;
        padding-bottom: 8px;
        margin-top: 0px;
        margin-bottom: 20px;
        line-height: 20px;
    }

    100% {
        opacity: 0;
        height: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        line-height: 0px;
    }
}
4

1 に答える 1

0

クラス .successFadeOut に IE 用の以下のコードを追加します。

    -ms-animation-duration:1s;
    animation-timing-function: linear;
于 2013-11-14T07:26:27.327 に答える