CSS3 transition nur, wenn die Klasse Hinzugefügt wird, nicht, wenn Sie entfernt werden

Ich habe das folgende CSS-Beispiel:

.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;
}

Dann habe ich ein DIV mit .message Klasse, und durch drücken einer Taste, füge ich die Klasse .unreadMessage, und durch drücken einer anderen Taste, Entferne ich es.

Mit diesem Beispiel, jedes mal, wenn ich ändern background-color durch hinzufügen oder entfernen von .unreadMessage es tut, die CSS-übergang.

Was ich tun möchte, ist, wenn möglich, eine sofortige Farbe ändern, wenn ich .unreadMessage, und haben den übergang nur dann, wenn es zu entfernen.

Die erste Sache, die kommen in meinem Kopf, war eine andere Klasse, in der die CSS-transition-Eigenschaften, und fügen Sie es nach dem hinzufügen .unreadMessage.

Aber es ist möglich, tun Sie es mit nur einer Klasse, oder mit einem Javascript-workaround?

  • Erstellen Sie bitte ein Turnschuh einfach verstehen
InformationsquelleAutor Fr0z3n | 2013-05-20
  1. 24

    Wenn Sie wollen nur einen übergang wenden, wenn die .message element nicht die unreadMessage Klasse, dann die transition Eigenschaften in der .message:not(.unreadMessage) selector:

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

.unreadMessage{
    background-color: blue;
}
    • Genau das was ich brauchte. Danke!!!
    InformationsquelleAutor Rob W
  2. 3

    Gibt es zwei Dinge zu erinnern, bei der Verwendung von CSS transitions:

    1. Übergänge passieren, wenn ein element sich im Zustand " geändert "mit pseudo-Klassen wie :hover oder :active oder dynamisch eingestellt mit JavaScript."
    2. Sie haben einen Ausgangspunkt und einen Endpunkt, oder Sie wird nicht funktionieren.

    Ist das größte Problem mit OP ' s Frage nicht CSS, es ist Ihre Namensgebung Struktur. Eine große Muster von CSS-übergängen ist, ändern Sie ein element der Klasse (oder in der MDN-Sprache "dynamisch setzen mit Javascript"). In OP ' s Beispiel Sie nicht ändern ein element der Klasse Struktur, Sie sind ändern von Klassen. CSS-übergänge nicht funktionieren, wenn sich ein element ändert, von einer Klasse zur anderen, aber Sie funktioniert, wenn in einer Klasse Hinzugefügt oder weggenommen.

    Das einfachste Beispiel dafür ist der Weg von .element zu .element.active. Wenn wir den übergang auf der base-Klasse .element, und fügen Sie dann ein ändern der Klasse .active, die übergänge angewendet .element wird der übergang von .element Einstellungen zu .element.active. Einstellungen.

    Hier ein JSFiddle Beispiel der Modifikation einer Basisklasse

    Zweitens, und das ist eine die ich vergessen alle die Zeit, die Basisklasse muss ein Start-Stil. Ich kann nicht übergang left im geänderten Zustand, wenn ich mich nicht left Satz in der base Stand.

    InformationsquelleAutor Pixelsmith
  3. 0

    Führen Sie das code-snippet zuerst, dann Lesen Sie unten

    Code-snippet folgt eine div mit transition: none;

    Auf klicken Sie auf, überschrieben transition - Eigenschaft mit dem hinzufügen einer neuen Klasse add-transition

    Auf den zweiten Klick, der gleichen Klasse entfernt & kein übergang.

    JS:

    var elm = document.querySelector('.no-transition'); 
		
elm.onclick = () => (
    elm.classList.toggle('add-transition') 
);

    CSS:

    .no-transition {
    background-color: aliceblue;
    transition: none;
}

.add-transition {
    background-color: deepskyblue;
    transition: background-color 3s;
}

/* Note: As like other any other CSS property
   Specificity or CSS Order can make the diffrence.
   Styles below are for code the snippet to look better. */

.wrapper {
    padding: 20px;
    margin: 20px;
    text-align: center;
    cursor: pointer;
    border: 1px solid lightgray;
}

    HTML:

    <div class="wrapper no-transition">
  Click here !!! <br/>
  By default, No transition. <br/>
  on click, bg color transition added. <br/>
  on second click, back to default, no transtion.
</div>

    https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    InformationsquelleAutor Anulal S
Schreibe einen Kommentar