5

CSSトランジションをもたらすいくつかのスタイル変更をトリガーするjavascriptがあります。

遷移が完了した後に実行されるコールバックをどのようにフックすればよいですか。明らかに、古いブラウザーでは即座に遷移しますが、これらは transitionend イベントも認識しません。

($.browser.msie && $.browser.version <= 9) の場合、さまざまなイベントをバインドする以外にこれを行う最善の方法は何ですか?これは悪い習慣だと理解しています。

これが私の要点を説明する簡単な例です。

HTML

<div>test</div>

CSS

div {
    border: 1px solid black;
    transition: width 2s;
    width: 5px
}

.test {
    width: 100px;
}

JS

$(function(){
    $(document).on('transitionend', function(){
        alert('transition complete');
    });
    $('div').addClass('test');
});

ライブ JS フィドル: http://jsfiddle.net/vsDrH/1/

このイベントを古いブラウザで機能させるにはどうすればよいですか?

助けてくれてありがとう。

4

2 に答える 2

5

次のように、CSS プロパティがブラウザーでサポートされているかどうかを確認できます。

http://jsfiddle.net/vsDrH/3/

function isSupported(property) {
    return property in document.body.style;
}

$(function(){
    $(document).on('transitionend', function(){
        alert('transition complete');
    });
    $('div').addClass('test');

    if(!isSupported('transition')) {
        $(document).trigger('transitionend');
    }
});
于 2013-05-08T11:21:08.130 に答える