38

新しく作成された dom 要素で css トランジションを使用する方法が見つかりません。

空の html ドキュメントがあるとします。

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

私もこのcssを持っています

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

#id.class {
    opacity: 1;
}

そしてこの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;
}

ただし、 http://jsfiddle.net/gwxkW/1/でわかるように、要素をクリックすると瞬時に表示されます。

クラスを設定しようとすると、結果がよくtimeout()見つかりますが、 javascriptと css エンジンの間の競合のように思えます。リッスンする特定のイベントはありますか？使ってみましたがうまくいきません。document.body.addEventListener('DOMNodeInserted', ...)

新しく作成された要素に CSS トランジションを適用するにはどうすればよいですか?

4

3 に答える 3

40

Firefox では、レイアウトの完了と CSS の移行の間で競合しているように見えます。Chrome ははるかに予測可能です。にクラス名を設定するとsetTimeout()、Chrome は常に動作し、Firefox はsetTimeout()時間が長い場合にのみ動作します。

Firefox でこのコードを使用すると ( を使用してもsetTimeout())、テキストがすぐに表示されます。

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;
}

しかし、レイアウト後にのみ返すことができるプロパティを要求してリフローを強制すると、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;
}

さらに、レイアウトを強制するためにそのプロパティを要求したらsetTimeout()、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;
}

この最後の動作は、Chrome と Firefox の両方で確認できます: http://jsfiddle.net/jfriend00/phTdt/

そして、この現象について説明している記事があります: http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

于 2012-08-23T10:04:17.747 に答える
16

要素をDOMに追加した直後に、レイアウトをトリガーしてトランジションを機能させるより良い方法を見つけました。

window.getComputedStyle(element).opacity;
于 2014-06-30T13:13:12.927 に答える