3

要素の遷移プロパティを読み取ろうとしていますが、空の文字列しか取得できません。私が見ることができるように、要素にはトランジションが適用されています。

これを実現するためにjQueryを使用し.css()ています。たとえば、次のコード

// in css
#transitionElement {
    transition: height 0.5s ease;
}

// and in JS
$('#transitionElement').height('59px');
console.log($('#transitionElement').css('transition'));
console.log($('#transitionElement').css('-moz-transition'));

トランジションをトリガーします。見ることはできますが、 2x をログに記録し(empty string)ます。

Chromiumでは.css('transition')問題なく動作します。

Firefoxでこれを機能させる方法はありますか?

編集：

firefox では、トランジション全体を文字列として読み取ることができないようです (jimmyweb で指摘されているように)。自分自身を助けるために cssHook を使用しました。他のブラウザについては知りませんが、いつかテストできるかもしれません。

if($.browser.mozilla) {
    $.cssHooks[ "transition" ] = {
        get: function( elem, computed, extra ) {
            return $.css(elem, 'transition-duration')
                 + ' ' + $.css(elem, 'transition-property')
                 + ' ' + $.css(elem, 'transition-timing-function');
        }
    };
}
4

2 に答える 2

4

実際、これはtransitionプロパティが空であることは奇妙ですが、transition構成されている他のプロパティにアクセスできるため、値全体を連結できtransitionます。getComputedStyleメソッドを使用して CSS プロパティ値を取得することもできます。コンソールは、空の文字列である最初のプロパティと遅延値 (指定しない場合) を除くすべてのプロパティを出力する必要があります。

var element = document.getElementById('transitionElement'),
    style = window.getComputedStyle(element);
    console.log(style.getPropertyValue('transition'));
    console.log(style.getPropertyValue('transition-delay'));
    console.log(style.getPropertyValue('transition-duration'));
    console.log(style.getPropertyValue('transition-property'));
    console.log(style.getPropertyValue('transition-timing-function'));

古いバージョンのベンダー プレフィックスを提供することも常に忘れないでください。

#transitionElement {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
于 2013-10-04T20:09:57.363 に答える