2

簡単な質問:

:hover疑似セレクター (つまり、:activeなど)を介してアニメーションをトリガーすることが適切/実行可能でない場合に、CSS トランジションを活用することは可能ですか?

私のユースケースは、フォーム送信後に何かをアニメーション化することです。私は次のようなことができると思っていました：

.success_message { ...transition stuff + opacity: 0 }
.success_message.shown { opacity: 1 }

次に、javascript を使用して、shownアニメーション化するこの要素にクラスを追加します。

jQueryなどをアニメーションに使用しないのはなぜですか? よろしくお願いします。私が対象としているプラ​​ットフォームである iPhone やその他のモバイル デバイスでは、CSS トランジションがはるかにスムーズです。現在、jQuery を使用してアニメーションを作成していますが、スムーズではありません。

疑似セレクターについて私が求めていたことを明確にするために編集しました。

4

2 に答える 2

3

すべてが期待どおりに動作するはずです。JSFiddle: http://jsfiddle.net/ghayes/zV9sc/12/

 .success_message {
   opacity: 0.0;
   transition: opacity 0.3s linear;
   -webkit-transition: opacity 0.3s linear;
   -moz-transition: opacity 0.3s linear;  
   -o-transition: opacity 0.3s linear;
 }

 .success_message.shown {
   opacity: 1.0;
 }

これで問題が解決しない場合は、追加のコード サンプルまたはブラウザ固有のものを含めてください。幸運を！

于 2011-07-18T23:50:04.207 に答える
1

はい、できます。Css遷移は、クラスが変更されたためであっても、cssプロパティが変更されるたびに機能します。

于 2011-07-18T23:44:46.877 に答える