Ich habe ein Formular, das als Einstellungsseite fungiert. Wenn Formularelemente geändert werden, werden sie als markiert unsaved
und 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 saved
entfernt 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!
quelle
unsaved
zu.unsaved
. Es ist eine Klasse, kein Element.Antworten:
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
.saved
und 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.quelle
.saved
Entfernen 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.Die Antwort des @ jfriend00 hilft mir , die Technik zu verstehen , nur zu animieren entfernen Klasse (nicht hinzufügen ).
Eine "Basis" -Klasse sollte eine
transition
Eigenschaft (wietransition: 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 wirtransition: 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-updated
Klasse animiert.quelle
Grundsätzlich richten Sie Ihr CSS wie folgt ein:
element { border: 1px solid #fff; transition: border .5s linear; } element.saved { border: 1px solid transparent; }
quelle
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');
quelle