18

次の CSS の例があります。

.message{
    background-color: red;
    transition: background-color 5s;
    -webkit-transition: background-color 5s; /* Safari */
    transition-delay: 2s;
    -webkit-transition-delay: 2s; /* Safari */
}

.unreadMessage{
    background-color: blue;
}

次に、クラスを含む DIV があり.message、ボタンを押すとクラスが追加.unreadMessageされ、別のボタンを押すとクラスが削除されます。

この例では、 を変更するたびbackground-colorに、 を追加または削除.unreadMessageして、CSS トランジションを行います。

私がやりたいことは、可能であれば、追加する.unreadMessageとすぐに色が変わり、それを削除するときにのみ遷移することです。

最初に頭に浮かんだのは、CSS トランジション プロパティを含む別のクラスを用意し、追加後に追加すること.unreadMessageでした。

しかし、1 つのクラスだけで、または Javascript の回避策を使用してそれを行うことは可能ですか?

4

3 に答える 3

4

CSS トランジションを使用する際に覚えておくべきことが 2 つあります。

  1. トランジションは、要素の状態が " :hover や :active などの疑似クラスを使用して変更されるか、JavaScript を使用して動的に設定される"ときに発生します。
  2. 開始点と終了点が必要です。そうしないと機能しません。

OPの質問の最大の問題はCSSではなく、命名構造です。CSS トランジションの主なパターンは、要素のクラスを変更することです (または、MDN の言語では「Javascript を使用して動的に設定する」)。OPの例では、要素のクラス構造を変更しているのではなく、クラスを変更しています。CSS トランジションは、要素があるクラスから別のクラスに変更された場合には機能しませんが、クラスが追加または削除された場合には機能します。

これの最も簡単な例は、 から.elementへの移行.element.activeです。基本クラス にトランジションを配置し、.element次に変更クラス を追加すると、 に.active適用さ.elementれるトランジションが.element設定から設定に遷移し.element.active.ます。

これは、基本クラスを変更する JSFiddle の例です。

第二に、これは私がいつも忘れていることですが、基本クラスには開始スタイルが必要です。基本状態に設定してleftいないと、変更状態に遷移できません。left

于 2016-02-08T20:53:38.977 に答える