CSS3-Übergang zum Hervorheben neuer Elemente, die in JQuery erstellt wurden

Lesezeit: 4 Minuten

Ich möchte einen CSS3-Farbübergang verwenden, um einen Highlight-Fading-Farbeffekt (gelb zu transparent) auf neue Elemente anzuwenden, die mit JQuery an das Markup angehängt werden.

CSS

#content div {
    background-color:transparent;
    -moz-transition:background-color 2s;
    -webkit-transition:background-color 2s;
    -o-transition:background-color 2s;
    transition:background-color 2s;
}

#content div.new {
    background-color:yellow;
}

HTML

<div id="content"></div>
<a id="add-element" href="#">add new element</a>

$('#add-element').click(function() {
    var newElement = $('<div class="new">new element</div>');
    $('#content').append(newElement);
    newElement.removeClass('new');
});

Wenn ich auf den Link klicke, wird das neue Element erstellt. Seine Klasse ist “neu” (Hintergrundfarbe gelb) und wird an das HTML-Markup angehängt. Ich sollte in der Lage sein, die “neue” Klasse sofort zu entfernen, um den Übergang der Hintergrundfarbe zu transparent (oder einer anderen Farbe) auszulösen. Ich mache es offensichtlich falsch, da die Hintergrundfarbe des neuen Elements sofort transparent dargestellt wird, ohne Übergangseffekt. Ich weiß, dass ich dies in der JQuery-Benutzeroberfläche tun kann, aber ich möchte CSS3-Übergänge verwenden.

jsfiddle hier:

http://jsfiddle.net/paulaner/fvv5q/

Nathan Prather

Ich konnte dies mit CSS3-Animation zum Laufen bringen. Bewerben Sie sich einfach highlight Klasse zu neuen Elementen:

$('#add-element').click(function() {
  $('<div class="highlight">new element</div>').appendTo('#content');
});

@keyframes yellow-fade {
  0% {
    background: yellow;
  }
  100% {
    background: none;
  }
}

.highlight {
  animation: yellow-fade 2s ease-in 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="add-element">Add element</button>
<div id="content"></div>

Ich habe in IE 10, Chrome, Safari und dem neuesten FF getestet und es funktioniert dort. Funktioniert wahrscheinlich nicht in IE 9 und niedriger …

https://jsfiddle.net/nprather/WKSrV/3/

Das ist viel besser und erfordert keine Fummelei auf der Javascript-Seite.

– Brendon Muir

10. Juni 2014 um 21:56 Uhr

Rezigiert

Dein Code ist nahezu perfekt. Sie müssen nur etwas auslösen, damit der Übergang funktioniert. Dies kann durch Hinzufügen einer Codezeile zu Ihrem Skript erfolgen.

$('#add-element').click(function() {
    var newElement = $('<div class="new">new element</div>');
    $('#content').append(newElement);
    // trigger on focus on newly created div
    newElement.focus();

    newElement.removeClass('new');
});

http://jsfiddle.net/UXfqd/

Sauber und einfach. Ich wusste, dass eine Art Ereignisauslösung erforderlich war, damit der Übergang funktionierte.

– Paulaner

10. Oktober 2012 um 8:58 Uhr
Nach ungefähr 3 Stunden des Versuchs, danke für die Hilfe 🙂 Gibt es eine Erklärung, warum es fokussiert werden muss?

– Jakob Valenta

5. Oktober 2013 um 16:49 Uhr
@JacobValenta Ich kann dazu keine w3c-Spezifikation mehr finden. Grundsätzlich braucht es eine Art von triggering Ereignis/Zustand wie z :active, :checked, :hover usw., damit der Übergang funktioniert. Stellen Sie sich vor, Sie haben 100 Elemente mit angewendetem Übergangseffekt, ohne irgendeine Art von trigger Alle werden sofort nach dem Laden der Seite animiert. Deshalb brauchen Sie etwas zu triggering die Animation bei einem bestimmten Ereignis/Zustand.

– Rezigiert

7. Oktober 2013 um 2:11 Uhr
Vielen Dank! Das macht jetzt Sinn. Prost

– Jakob Valenta

7. Oktober 2013 um 6:50 Uhr
Dies ist die beste Antwort, die ich bei Google gefunden habe, und verdient es, als richtig gekennzeichnet zu werden

– Balaji Viswanath

14. August 2014 um 16:17 Uhr

Es ist ein hässlicher Hack, aber es scheint zu funktionieren. Ich bin sicher, es gibt einen besseren Weg.

$('#add-element').click(function() {
    var newElement = $('<div class="new">new element</div>');
    $('#content').append(newElement);
    setTimeout(function(){
        newElement.removeClass('new');
    },0);
});

http://jsfiddle.net/fvv5q/22/

Vielen Dank. Es funktioniert auf Chrome, aber es scheint instabil und unberechenbar auf Firefox zu sein.

– Paulaner

10. Oktober 2012 um 8:22 Uhr
@Paulaner Andy hat die richtige Antwort, und darüber denke ich nach. Die Verwendung von 1000 anstelle von 0 ist möglicherweise besser, da Sie den Übergang sehen möchten. 0 blinkt nur die Farbe und verschwindet. Übrigens, ich sehe den Übergang hier nicht mit FF15, stattdessen ist es ein solides Gelb, das noch nicht unterstützt wird? @Andy, ich betrachte das nicht als hack. In dieser speziellen Situation sollte es so funktionieren, da jQuery sofort nach dem Anhängen removeClass ausführte, und deshalb der Übergang sollte nicht gesehen werden.

– Benutzer1643156

10. Oktober 2012 um 8:43 Uhr
Danke Jungs. Rezigned hat gerade eine saubere Lösung gepostet, die für mich perfekt funktioniert.

– Paulaner

10. Oktober 2012 um 8:56 Uhr
@ user1643156 Ja, CSS-Übergänge funktionieren nur, wenn das Element sichtbar ist. daher ist es hier etwas kontraintuitiv, weil er sogar die removeclass in einer zusätzlichen Zeile erstellt hat, anstatt sie mit dem Append zu verketten.

– Andy

10. Oktober 2012 um 9:01 Uhr

11937800cookie-checkCSS3-Übergang zum Hervorheben neuer Elemente, die in JQuery erstellt wurden

#Abfrage #CSS #CSS-Übergänge #Überleitung