CSS-Übergang beim Entfernen der Klasse

79

Ich habe ein Formular, das als Einstellungsseite fungiert. Wenn Formularelemente geändert werden, werden sie als markiert unsavedund haben eine andere Rahmenfarbe. Wenn das Formular gespeichert wird, werden sie durch eine andere Rahmenfarbe als gespeichert markiert.

Ich möchte, dass der Rand beim Speichern des Formulars allmählich ausgeblendet wird.

Die Bestellung wird gehen:

<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

Wenn ich einen CSS3-Übergang zum Feuern bekommen kann, wenn die Klasse savedentfernt wird, dann könnte er ausgeblendet werden und alles wäre gut gelaunt. Derzeit muss ich es manuell animieren (natürlich mit einem Plug-In), aber es sieht abgehackt aus, und ich möchte den Code nach CSS3 verschieben, damit er flüssiger wird.

Ich brauche das nur, um in Chrome und Firefox 4+ zu funktionieren, obwohl andere nett wären.

CSS:

Hier ist das zugehörige CSS:

.unsaved {
    border: 3px solid #FFA500;
    padding: 0;
}
.saved {
    border: 3px solid #0F0;
    padding: 0;
}

Ich möchte im folgenden Übergang (oder so ähnlich) arbeiten:

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;

Hinweis:

Persönlich bin ich mit diesem Schema der Benutzerinteraktion nicht einverstanden, aber so will es unser Software-Lead. Bitte schlagen Sie nicht vor, dass ich die Funktionsweise derzeit ändere. Vielen Dank!

Beatgammit
quelle
5
Übergänge von der Anzeige: keine wird sofort sein
Peter Ehrlich
wechseln unsavedzu .unsaved. Es ist eine Klasse, kein Element.
Hofnarwillie
@hofnarwillie - behoben; Es war nur ein Tippfehler
Beatgammit

Antworten:

70

CSS-Übergänge definieren zwei Zustände für das Objekt mithilfe von CSS. In Ihrem Fall definieren Sie, wie das Objekt aussieht, wenn es die Klasse hat, "saved"und Sie definieren, wie es aussieht, wenn es die Klasse nicht hat "saved"(es sieht normal aus). Wenn Sie die Klasse entfernen "saved", wechselt sie gemäß den für das Objekt ohne "saved"Klasse geltenden Übergangseinstellungen in den anderen Status .

Wenn die CSS-Übergangseinstellungen für das Objekt (ohne die "saved"Klasse) gelten, gelten sie für beide Übergänge.

Wir könnten genauer helfen, wenn Sie alle relevanten CSS, die Sie verwenden, in den von Ihnen bereitgestellten HTML-Code einfügen.

Ich gehe davon aus, dass Ihre Übergangs-CSS-Einstellungen nur für HTML gelten .savedund dass es beim Entfernen keine Steuerelemente gibt, mit denen Sie eine CSS-Einstellung angeben können. Möglicherweise möchten Sie eine weitere Klasse hinzufügen ".fade", die Sie ständig für das Objekt belassen, und Sie können Ihre CSS-Übergangseinstellungen für diese Klasse angeben, damit sie immer wirksam sind.

jfriend00
quelle
Ich habe mein aktuelles CSS hinzugefügt und den Übergang hinzugefügt, den ich möchte. Ich bin mir nicht sicher, ob das Hinzufügen einer '.fade'-Klasse funktionieren würde, da die anderen Einstellungen von' gespeichert 'bereits vorhanden wären. Ich werde das aber versuchen und sehen, ob ich es zum Laufen bringen kann. Vielen Dank!
Beatgammit
1
@tjameson - Sie benötigen eine Klasse für das Objekt, die es im Status nach dem .savedEntfernen identifiziert . Für diesen Zustand sind keine Übergänge definiert (weshalb Sie keine erhalten). Außerdem haben Sie kein CSS eingefügt, das tatsächlich einen sinnvollen Übergang definiert. Sie haben einige Übergänge aufgelistet, aber nicht angezeigt, an welche Klassen sie angehängt sind, und das ist der Schlüssel. Dies funktioniert am besten, wenn Sie es in eine jsFiddle einfügen, damit wir beide dort leichter damit spielen können und tatsächlich sehen können, was funktioniert und was nicht.
jfriend00
Beachten Sie, dass das Nichteinschließen eines Übergangs in die Basisklasse dazu führen kann, dass der IE nicht ordnungsgemäß zu den ursprünglichen Eigenschaften zurückkehrt. (Wenn Sie also die Deckkraft animieren und die Klasse, die die Deckkraft animiert, hängen bleibt, anstatt [ jsfiddle.net/z3txjbaj/6 ] zurückzusetzen, wird dies durch Hinzufügen eines Übergangs zur Basisklasse behoben . jsfiddle.net/z3txjbaj/9 ). Beachten Sie, dass diese beiden Demos nur in Chrome und FF funktionieren. Nur der IE scheint dieses Problem zu haben.
Hanna
23

Die Antwort des @ jfriend00 hilft mir , die Technik zu verstehen , nur zu animieren entfernen Klasse (nicht hinzufügen ).

Eine "Basis" -Klasse sollte eine transitionEigenschaft (wie transition: 2s linear all;) haben. Dies ermöglicht Animationen, wenn eine andere Klasse zu diesem Element hinzugefügt oder daraus entfernt wird. Um die Animation zu deaktivieren, wenn eine andere Klasse hinzugefügt wird (und nur das Entfernen von Klassen animiert), müssen wir transition: none;der zweiten Klasse hinzufügen .

Beispiel

CSS:

.issue {
  background-color: lightblue;
  transition: 2s linear all;
}

.recently-updated {
  background-color: yellow;
  transition: none;
}

HTML:

<div class="issue" onclick="addClass()">click me</div>

JS (nur zum Hinzufügen einer Klasse erforderlich):

var timeout = null;

function addClass() {
  $('.issue').addClass('recently-updated');
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  timeout = setTimeout(function () {
    $('.issue').removeClass('recently-updated');
  }, 1000);
}

Plunker dieses Beispiels.

Mit diesem Code wird nur das Entfernen der recently-updatedKlasse animiert.

Ruslan Stelmachenko
quelle
Prägnant und gut erklärt. Vielen Dank
oodavid
1
Darauf kann ich eine tolle Antwort geben! Eine kurze, aber präzise Erklärung mit einem einfachen, aber gründlichen Codebeispiel, einem Link zu einem funktionierenden Plunker. Könnte nicht mehr verlangen!
FireAphis
13

Grundsätzlich richten Sie Ihr CSS wie folgt ein:

element {
  border: 1px solid #fff;      
  transition: border .5s linear;
}

element.saved {
  border: 1px solid transparent;
}
Ken Wheeler
quelle
3

In meinem Fall hatte ich ein Problem mit dem Opazitätsübergang, also behebt dieses Problem Folgendes:

#dropdown {
    transition:.6s opacity;
}
#dropdown.ns {
    opacity:0;
    transition:.6s all;
}
#dropdown.fade {
    opacity:1;
}

Maus eingeben

$('#dropdown').removeClass('ns').addClass('fade');

Maus verlassen

$('#dropdown').addClass('ns').removeClass('fade');
user956584
quelle