0

私は、ユーザーに提示するには「長すぎる」エラーで使用するために準備された、素敵な3部構成のiPhone風の「ポップ」アニメーションを持っています。これを使用するには、非表示のエラーdivで.show（）を呼び出すだけです。Safariの下ではそれは美しく動作しますが、Firefoxの下では、アニメーションを完全にスキップして通常の古い.show（）を実行するだけで、どろどろになります。

これをMozillaでも機能させるにはどうすればよいですか？

関連するCSS：

@-webkit-keyframes pop-in {
    0% { opacity: 0;-moz-transform: scale(0);-webkit-transform: scale(0); }
    50% { opacity: 1;-moz-transform: scale(1.5);-webkit-transform: scale(1.5); }
    100% { opacity: 1;-moz-transform: scale(1);-webkit-transform: scale(1); }
}

@-moz-keyframes pop-in {
    0% { opacity: 0;-moz-transform: scale(0);-webkit-transform: scale(0); }
    50% { opacity: 1;-moz-transform: scale(1.5);-webkit-transform: scale(1.5); }
    100% { opacity: 1;-moz-transform: scale(1);-webkit-transform: scale(1); }
}

@-ms-keyframes pop-in {
    0% { opacity: 0;-moz-transform: scale(0);-webkit-transform: scale(0); }
    50% { opacity: 1;-moz-transform: scale(1.5);-webkit-transform: scale(1.5); }
    100% { opacity: 1;-moz-transform: scale(1);-webkit-transform: scale(1); }
}

@keyframes pop-in {
    0% { opacity: 0;transform: scale(0);transform: scale(0); }
    50% { opacity: 1;transform: scale(1.5);transform: scale(1.5); }
    100% { opacity: 1;transform: scale(1);transform: scale(1); }
}


#error {
    ...
    -webkit-animation:pop-in 0.3s;
    -moz-animation:pop-in 0.3s;
    -ms-animation:pop-in 0.3s;
    animation:pop-in 0.3s;
    ...
}
4

2 に答える 2

1

セレクターを＃error.activeに設定し、要素を表示した後、.activeクラスを追加します。

于 2012-08-08T14:41:11.743 に答える
0

jquery.show（）のデフォルトの期間は400です。

jquery.show（0）;を使用します。次に、$（ "＃idElement"）。addClass（ "myOpacityClass"）;を介してcss不透明度で要素をアニメーション化します。

于 2016-03-18T14:53:36.113 に答える