CSS übergeht neue Elemente

Ich kann nicht einen Weg finden, um css-übergänge, die auf neu erstellte dom-Elemente.

sagen wir, ich habe ein leeres html-Dokument.

<body>
    <p><a href="#" onclick="return f();">click</a></p>
</body>

Ich habe auch diese css -

#id {
    -moz-transition-property: opacity;
    -moz-transition-duration: 5s;
    opacity: 0;
}

#id.class {
    opacity: 1;
}

und diese js -

function f() {
    var a = document.createElement('a');
    a.id = 'id';
    a.text = ' fading in?';
    document.getElementsByTagName('p')[0].appendChild(a);
    //at this point I expect the span element to be with opacity=0

    a.className = 'class';
    //now I expect the css transition to go and "fade in" the a        

    return false;
}

aber, wie Sie sehen können auf http://jsfiddle.net/gwxkW/1/wenn Sie auf das element erscheint sofort.

Wenn ich versuchen die Klasse in einem timeout() ich oft das Ergebnis finden, aber mir scheint es mehr ein Rennen zwischen javascript-und css-engine. Gibt es ein bestimmtes Ereignis zu hören? Ich habe versucht, zu verwenden document.body.addEventListener('DOMNodeInserted', ...) aber es funktioniert nicht.

Wie kann ich mich bewerben, css-transitions, die auf neu geschaffenen Elemente?

InformationsquelleAutor der Frage Vito De Tullio | 2012-08-23

  1. 8

    requestAnimationFrame() (https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame) scheint zu funktionieren über Firefox, Chrome und Safari. Ein zuverlässiger, logische Lösung, dass setTimeout(). Für ältere Browser (IE8) wird es erforderlich einen Polyfill (natürlich), der übergang wird nicht auftreten, aber die CSS wird sich noch ändern).

    InformationsquelleAutor der Antwort Jason

  2. 38

    In Firefox, es scheint ein Rennen zwischen layout ausfüllen und CSS-übergang. Chrome ist viel mehr vorhersehbar. Wenn ich den Namen der Klasse auf ein setTimeout() Chrome immer funktioniert, Firefox funktioniert nur, wenn die setTimeout() Zeit ist lang.

    Mit diesem code in Firefox (auch über die setTimeout()), der text zeigt sofort:

    function f() {
    var a = document.createElement('a');
    a.id = 'id';
    a.innerHTML = ' fading in?';
    document.getElementsByTagName('p')[0].appendChild(a);
    //at this point I expect the span element to be with opacity=0

    setTimeout(function() {
        a.className = 'fadeIn';
    }, 10);
    return false;
}

    Aber, wenn ich Kraft ein reflow durch das anfordern einer Eigenschaft, können nur zurückgegeben werden, nachdem das layout, es beginnt dann zu arbeiten, die in Firefox:

    function f() {
    var a = document.createElement('a');
    a.id = 'id';
    a.innerHTML = ' fading in?';
    document.getElementsByTagName('p')[0].appendChild(a);
    //at this point I expect the span element to be with opacity=0

    //request property that requires layout to force a layout
    var x = a.clientHeight;
    setTimeout(function() {
        a.className = 'fadeIn';
    }, 10);
    return false;
}

    Des weiteren, habe ich einmal ersuchen, dass Eigentum zu zwingen, ein layout, ich kann sogar entfernen Sie die setTimeout() und die animation funktioniert in Firefox.

    function f() {
    var a = document.createElement('a');
    a.id = 'id';
    a.innerHTML = ' fading in?';
    document.getElementsByTagName('p')[0].appendChild(a);
    //at this point I expect the span element to be with opacity=0

    //request property that requires layout to force a layout
    var x = a.clientHeight;
    a.className = 'fadeIn';
    return false;
}

    Können Sie sehen, dieses Letzte Arbeit hier in Chrome und Firefox: http://jsfiddle.net/jfriend00/phTdt/

    Ja, hier ist ein Artikel, der beschreibt das Phänomen: http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

    InformationsquelleAutor der Antwort jfriend00

  3. 13

    Fand ich ein schöner Weg, um die trigger-layout sowie die übergänge funktionieren nur, nachdem man das element an den DOM:

    window.getComputedStyle(element).opacity;

    InformationsquelleAutor der Antwort demian85

Schreibe einen Kommentar