1. ホーム
  2. css

[解決済み] クラス削除時のCSS遷移

2023-03-22 20:10:14

質問

設定ページとして機能するフォームがあります。フォームの要素が変更された場合、それらは 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 の遷移設定を指定することで、常に有効な状態にすることができます。