web-dev-qa-db-ja.com

新しい要素のCSS遷移

新しく作成された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() iでクラスを設定しようとすると、多くの場合結果が見つかりますが、私にとっては、JavaScript間の競合のようですそしてCSSエンジン。聞くべき特定のイベントはありますか？ document.body.addEventListener('DOMNodeInserted', ...)を使用しようとしましたが、機能しません。

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

javascriptcssfirefoxcss-transitions
37
Vito De Tullio

requestAnimationFrame()（ https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame ）は、Firefox全体で機能しているようですChromeおよびSafari。setTimeout()より信頼性の高い論理的なソリューションです。古いブラウザ（IE8）では、ポリフィルが必要になります（当然、移行は行われませんが、CSSは変化する）。

8
Jason

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

この最後の1つの作品は、ChromeおよびFirefox： http://jsfiddle.net/jfriend00/phTdt/ の両方で確認できます。

そして、これは現象を論じる記事です： http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

38
jfriend00

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

window.getComputedStyle(element).opacity;
15
demian85