CSS-Übergang beim Entfernen der Klasse

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!

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.

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.

Grundsätzlich richten Sie Ihr CSS wie folgt ein:

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

element.saved {
  border: 1px solid transparent;
}

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');