[解決済み] クラス削除時のCSS遷移
質問
設定ページとして機能するフォームがあります。フォームの要素が変更された場合、それらは
unsaved
としてマークされ、異なるボーダーカラーを持ちます。フォームが保存されると、それらは別のボーダー色を持っていることによって保存されたようにマークされます。
フォームが保存されたときに、ボーダーが徐々にフェードアウトするようにしたいのですが、どうすればよいでしょうか?
順番は行きます。
<input type='text' class='unsaved' /> Not saved yet, border is yellow
<input type='text' class='saved' /> Saved, so the border is green
<input type='text' class='' /> Fade out if coming from class saved
もし、CSS3 のトランジションが、クラス
saved
が削除されたときに、CSS3 のトランジションが発生するようにできれば、フェードアウトしてすべてがうまくいくはずです。現在は手動でアニメーションさせていますが (もちろんプラグインを使用しています)、見た目がぎこちないので、コードを CSS3 に移行してよりスムーズにできるようにしたいと思います。
私はこれがChromeとFirefox 4+で動作することだけが必要ですが、他のものもあればうれしいです。
CSSです。
関連するCSSはこちらです。
.unsaved {
border: 3px solid #FFA500;
padding: 0;
}
.saved {
border: 3px solid #0F0;
padding: 0;
}
以下のような遷移(のようなもの)で作業を行いたいと考えています。
border-color: rgba(0,0,0,0);
-webkit-transition: border-color .25s ease-in;
-moz-transition: border-color .25s ease-in;
-o-transition: border-color .25s ease-in;
transition: border-color .25s ease-in;
注意
個人的には、このユーザー インタラクションのスキームには賛成できませんが、これは私たちのソフトウェアのリードが望んでいる方法です。現在機能している方法を変更するよう、私に提案しないでください。ありがとうございます。
どのように解決するのですか?
CSSの遷移は、CSSを使ってオブジェクトに2つの状態を定義することで機能します。 あなたの場合、オブジェクトがクラス
"saved"
というクラスがあるときにどう見えるかを定義し、クラスがないときにどう見えるかを定義しています。
"saved"
(というクラスがないときにどのように見えるかを定義します(通常の見え方です)。 クラスを削除すると
"saved"
を削除すると、オブジェクトのトランジション設定に従って他の状態に移行します。
"saved"
クラスがないオブジェクトに対して行われる遷移の設定に従って、他の状態に遷移します。
CSS の遷移設定がオブジェクトに適用される場合、(
"saved"
クラスがない) 場合は、両方のトランジションに適用されます。
あなたが提供したHTMLに使用しているすべての関連するCSSを含んでいれば、私たちはより具体的に助けることができます。
あなたのHTMLを見たところ、あなたのトランジションCSSの設定は、以下のものにのみ適用されているようです。
.saved
にしか適用されないため、これを削除すると、CSS 設定を指定するためのコントロールがなくなります。 そこで、別のクラス
".fade"
を追加し、そのクラスで CSS の遷移設定を指定することで、常に有効な状態にすることができます。
関連
-
[CSSチュートリアル】新しいCSS:whereと:is擬似クラス関数とは?
-
[CSSチュートリアル】CSSプロパティ*-gradientの有用性を探る
-
[CSSチュートリアル】CSSで実現できるのなら、わざわざJavaScriptを使う必要はない
-
[CSSチュートリアル】CSSプリグラミング言語と詳細解説の違いについて
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] CSSの三角形はどのように機能するのですか?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】カットコーナー+ボーダー+プロジェクション+コンテンツ背景色のグラデーション効果を実現するCSS
-
[CSSレイアウト例】float(フロート)、position(ポジション)プロパティの差分によるCSSレイアウト
-
[CSSチュートリアル】検索ボックスの非表示機能を実現するCSS(アニメーションの順送り・逆戻りシーケンス)
-
[CSSチュートリアル】CSSのfloatとunfloatについて
-
[CSSチュートリアル】パララックススクロールの効果を完成させるCSS
-
[CSSチュートリアル]CSSは、メソッドのさまざまな記事の分割行のスタイルの要約を達成するために
-
[CSSチュートリアル】CSSで炎のエフェクトを記述する方法
-
[Div+CSSチュートリアル】divの背景を透明にする設定例
-
[CSSチュートリアル】background-positionプロパティのパーセンテージ値の使い方を探る
-
[css3]CSS3は本当にSCSSに取って代わるのだろうか?