2

transitionend イベントのサポートについてブラウザーをテストしたいと思います。これは、次のようにして非常に簡単に実現できます。

var isSupported = 'ontransitionend' in window;

ただし、これは Firefox では機能せず、よく知られている問題です。ここでこれに対する解決策を説明している次のブログ投稿を見つけました: Detecting event support without browser sniffingしかし、この解決策で transitionend のテストを成功させることはできませんでした。

問題は、これは「onclick」などのほとんどのイベントで機能しますが、transitionend イベントでは機能しないようで、機能するソリューションが見つからないことです。これを実際に示すためにフィドルを作成しました。最初に onclick イベントをテストしてテクニックの動作を実証し、次に同じテクニックを transitionend に使用します。

Onclick は true を返しますが、ブラウザーのサポートが利用可能であるにもかかわらず、ontransitionend は false を返します。

4

2 に答える 2

5

その通りにやってます

function isTransitionsSupported() {
    var thisBody = document.body || document.documentElement,
        thisStyle = thisBody.style,
        support = thisStyle.transition !== undefined || 
                  thisStyle.WebkitTransition !== undefined || 
                  thisStyle.MozTransition !== undefined || 
                  thisStyle.MsTransition !== undefined || 
                  thisStyle.OTransition !== undefined;
    return support;
}

次に、それを変数に割り当てることができます

var = isTransitionSupported();

次に、単純にすべてのリスナーを使用します

var transEndEventNames = 'webkitTransitionEnd transitionend oTransitionEnd MSTransitionEnd transitionend';

たとえばjQueryの場合：

el.on(transEndEventNames, function() { ... });
于 2013-10-15T14:17:50.067 に答える