Fade-in dynamisch generierte Inhalte mit Bootstrap 3

Habe ich gelesen mehrere ähnlich Fragen auf SO zu Bootstrap ist fade Klassen, aber keiner von Ihnen scheinen zu meinen Problem.

Ich verstehe, dass die fade-animation in Bootstrap 3 funktioniert durch Umschalten opacity zwischen 0 und 1 wenn Sie hinzufügen, die .in - Klasse zu einem element, das schon eine .fade Klasse. Dies funktioniert gut für mich, wenn der Umgang mit einem element, der bereits in den HTML-Code (zum Beispiel, diese JS-Fiddle demo).

Das problem ist, dass der übergang scheint nicht zu passieren, wenn das element erstellt wird, die dynamisch mit Javascript. Zum Beispiel der folgende code erzeugt und zeigt eine Warnmeldung an, aber die CSS-übergang nicht passieren (getestet in Chrome und Firefox). Wenn ich manuell hinzufügen und entfernen Sie die in Klasse in Dev-Tools, die fade-gut funktioniert:

$('<div class="alert fade">This is a test</div>')
  .appendTo($someElement)
  .addClass('in');

Klar die .addClass() Funktion, weil der Alarm ruft die in Klasse und wird angezeigt, aber der übergang nicht passieren. Irgendeine Idee, wie kann ich es auf der Arbeit?

Einer bearbeitbaren demo, siehe dieser Stift auf CodePen.

  • warum wurde dieses re-tagged mit twitter-bootstrap-2? Ich nehme an, es gibt nicht viel Unterschied zwischen 2 und 3 Bezug zu diesem Thema, aber ich bin definitiv mit 3.
  • Du hast Recht, meine re-tag war zu schnell, und basiert auf der verlinkten JSFiddle. Ich entfernte twitter-bootstrap-3 als der framework-version keinen Einfluss auf das Ergebnis.
InformationsquelleAutor Michael Martin-Smucker | 2014-01-06
  1. 3

    Das problem, das Sie sehen, ist, dass durch die Zeit, die der browser rendert das element, die Sie bereits Hinzugefügt haben, der "übergang" - Klasse. Das hinzufügen eines Elements nicht dazu führen, dass es gerendert zu werden, bis es sein muss. Sobald ein element gerendert wurde mit dem "Anfangswert" und hat auch den übergang css-Eigenschaft gesetzt (aus der "ersten" Klassen), können Sie fügen Sie dann die anderen in der Klasse zum auslösen der animation. Sie müssen den browser gerendert Initialen Zustand vor dem hinzufügen der anderen Klasse oder es gibt nichts zu animieren, "aus", und es kommt auf es ist die vollständige Umstellung Wert.

    Könnten Sie versuchen, beim Lesen eines Wertes aus, dass element wie width sollte ein Neuzeichnen erzwingen, bevor Sie hinzufügen die andere Klasse: http://codepen.io/anon/pen/hGrFe

    Wenn Sie gehen, nehmen anthony Ansatz, ich würde vorschlagen, mit requestAnimationFrame statt setTimeout als, der garantiert, dass nach einem repaint passiert ist (vorausgesetzt, browser-Unterstützung für die raf).

    Zu speichern, wiederholen Sie sich, könnten Sie schreiben Ihre eigenen repaint Methode auf jQuery:

    jQuery.fn.repaint = function() {
    //getting calculated width forces repaint (hopefully?!)
    this.width();
    //return chain
    return this;
};

//then later:
$('<div class="alert fade">This is a test</div>')
    .appendTo($someElement)
    .repaint()
    .addClass('in');
    InformationsquelleAutor gnarf
  2. 2

    Versuchen Sie Ihr javascript zu etwas wie diesem:

    var $alert = $('<div class="alert alert-success fade out">Why does this box not fade in?</div>');

$('#container').append($alert);

window.setTimeout(function () {
    $alert.addClass('in');
}, 0);

    Hier sind einige weitere Lesen, die erklärt, was Los ist.

    http://ejohn.org/blog/how-javascript-timers-work/

    Warum ist setTimeout(fn, 0) manchmal ist es nützlich?

    • Danke, das hat geholfen, zu Lesen. Ich bin mir noch nicht ganz sicher, ob ich verstehe, aber. Hat die verkettete addClass() passieren, bevor der browser beendet die Malerei das neu hinzugefügte element? Und setTimeout(fn, 0) lässt es warten, bis das repaint ist fertig?
    • Obwohl weniger standard als setTimeout -- requestAnimationFrame genauer darstellt, was geschehen muss, muss Es sein, eine render-des element zwischen zunächst das hinzufügen des Elements und das hinzufügen der zweiten Klasse, um zu sehen, den übergang.
    InformationsquelleAutor antony
Schreibe einen Kommentar