CSS-Übergang, der nicht ausgelöst wird

hier sind zwei Möglichkeiten, dies zu tun.

1 - CSS transitions

mithilfe setTimeout die addClass Methode wird ausgeführt, nachdem statt zusammen mit dem vorhergehenden Skript, so dass die transition Ereignis wird ausgelöst,

Beispiel jsfiddle

jQuery:

var div = $('<div class="trans" />');
$('#container').append(div);
//set the class change to run 1ms after adding the div
setTimeout(function() {div.addClass('wide')}, 1); 

CSS:

.trans {
    width: 20px;
    height: 20px;
    background-color: cyan;
    -webkit-transition: all 5s ease;
       -moz-transition: all 5s ease;
        -ie-transition: all 5s ease;
         -o-transition: all 5s ease;
            transition: all 5s ease;
}
.wide {
    width: 200px;
}

2 - jQuery - .animate() Funktion

Beispiel jsfiddle

jQuery:

var div = $('<div class="trans" />');
$('#container').append(div);
div.animate({'width': '200px'}, 5000); //5 sec animation

CSS:

.trans {
    width: 20px;
    height: 20px;
    background-color: cyan;
}

InformationsquelleAutor der Antwort MikeM

In Antwort auf-der-bounty:

Wenn Sie nicht den Luxus haben zu wissen, welche Immobilie wird umgestellt oder einfach glaube nicht, dass es eine gute übung, um Kraft, ein setTimeout zu bekommen, eine animation auf Feuer, Sie können erzwingen, dass ein reflow in einer anderen Art und Weise.

Dem Grund, dass setTimeout funktioniert in Erster Linie aufgrund der Tatsache, dass Sie verursacht eine vollständige Dokument Umfließen in der Zwischenzeit, auch wenn die Dauer festgelegt ist 0. Das ist nicht der einzige Weg, um die Ursache für reflow.

Link zu einem fiddle

JavaScript

for (x = Math.ceil(Math.random() * 10), i=0;i<x;i++){
    $('<div />').appendTo($('#container')).addClass('trans');
}

var divs = $('#container div');
var x = divs.eq(Math.ceil(Math.random() * divs.length));
x[0].offsetHeight;
x.addClass('wide');

Mit diesem JavaScript-wir sind zufällig Zugabe von zwischen 1 und 10 div Elemente, und klicken Sie dann einer von denen zufällig und hinzufügen der wide Klasse.

Werden Sie feststellen, eine ungerade Zeile JavaScript in dort nämlich x[0].offsetHeight. Dies ist der Dreh-und Angelpunkt der ganzen operation. Aufruf offsetHeight löst das Dokument Umfließen, ohne mit einem setTimeout oder das Abfragen der CSS-Wert.

Was ein reflow ist in Bezug auf den DOM:

Einem reflow berechnet das layout der Seite. Ein reflow auf ein element
recomputes die Abmessungen und position des Elements, und es auch
Trigger weiter fließt auf das element der Kinder, Vorfahren und
Elemente, die angezeigt wird, nachdem es in der DOM. Dann ruft es eine endgültige
repaint. Umfließen ist sehr teuer, aber leider kann es sein
leicht ausgelöst.

Also bitte seien Sie vernünftig, wie Sie diese Funktionen verwenden. Nicht zu viel von einer Besorgnis bei den meisten modernen Browsern (wie jQuery ist berüchtigt für das brennen mehrere fließt), aber immer noch etwas zu prüfen vor dem hinzufügen etwas wie diese Lösung alle über Ihre website.

Wichtiger Hinweis: Dies ist nicht mehr oder weniger effizient sein als eine setTimeout nennen. Dies ist nicht eine Magische Kugel Lösung, und es tut die gleiche Sache unter der Haube.

Hier ist das entsprechenden CSS-Referenz:

.trans {
    width: 20px;
    height: 20px;
    background-color: cyan;
    -webkit-transition: all 5s ease;
       -moz-transition: all 5s ease;
         -o-transition: all 5s ease;
            transition: all 5s ease;
}

.trans.wide {
    width: 200px;
}

InformationsquelleAutor der Antwort Josh Burgess

var div = $('<div />');

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

div.css('width', '20px').addClass('trans', function() {
   div.css('width', '200px') 
});

Erstellt ein neues DIV-element und fügt die 'trans' - Klasse, die auf das element, um das Feuer der CSS-übergang

InformationsquelleAutor der Antwort mike510a