6

の実際の名前を機能検出するためのよりクリーンな方法を探していtransitionendます。すべてのバリエーションにブルートフォースでハンドラーを追加するだけの例をたくさん見てきました。また、jQuery（または同様のフレームワーク）に依存する必要はありません。

私は基本的にこのリストから始めて、最適なものをバインドすることを望んでいます（つまり、リストの最初に一致する）。

var transitionendName,
    events = [
        'transitionend',
        'webkitTransitionEnd',
        'MozTransitionEnd',
        'oTransitionEnd'
    ];

// ^^^^^ your code here

myElem.addEventListener(transitionendName, myHandler, false);

誰もがこれに対するクリーンな解決策を持っていると感じていますか？同じ解決策がおそらくanimationendイベントでも機能します。

編集： msTransitionEndおよび'-ms-'プレフィックス付きプロパティは、最終的なIE10リリース候補の1つで削除されました。

4

4 に答える 4

4

すべてのイベント終了名を登録してから、非常に短いCSS遷移をトリガーして、どれが発生するかを確認できます。また、IE10はを使用transitionendしているため、を使用するブラウザはありませんmsTransitionEnd。

これを行う方法の例を次に示します。http： //jsfiddle.net/jfriend00/5Zv9m/

var transitionendName,
    events = [
        'transitionend',
        'webkitTransitionEnd',
        'MozTransitionEnd',
        'oTransitionEnd'
    ];

function findTransitionEnd(callback) {
    // add an off-screen element
    var elem = document.createElement("div");
    elem.id = "featureTester";
    document.body.appendChild(elem);

    // clean up temporary element when done
    function cleanup() {
        document.body.removeChild(elem);
        elem = null;
    }

    // set fallback timer in case transition doesn't trigger
    var timer = setTimeout(function() {
        if (!transitionendName) {
            cleanup();
            callback("");
        }
    }, 200);

    // register all transition end names
    for (var i = 0; i < events.length; i++) {
        (function(tname) {
            elem.addEventListener(tname, function() {
                if (!transitionendName) {
                    transitionendName = tname;
                    clearTimeout(timer);
                    cleanup();
                    callback(tname);
                }

            });
        })(events[i]);
    }


    // trigger transition
    setTimeout(function() {
        elem.className = "featureTestTransition";
    }, 1);
}
于 2012-10-10T00:39:59.790 に答える
4

（純粋に実用的なソリューションではなく）純粋な特徴の検出に適しているが、より効率的な別のバリエーション：

var transitionendNames = [
    'transitionend',
    'webkitTransitionEnd',
    'MozTransitionEnd',
    'oTransitionEnd'
];

/**
 * Helper function to bind to the correct transitionend event
 * @param {function} callback The function to call when the event fires
 */
var transitionend = function(elem, callback) {
    var handler = function(e) {
        //console.log('transitionend == '+e.type);

        // test in case multiple were registered before change
        if (transitionendNames) {
            // store the actual name
            var transitionendName = e.type;

            // every other time, bind only to actual event
            transitionend = function(elem, callback) {
                elem.addEventListener(transitionendName, callback, false);
            };

            // flag for any others
            transitionendNames = null;
        }
        return callback.call(elem, e);
    };

    // until an event has been triggered bind them all
    for (var i=0, len=transitionendNames.length; i<len; i++) {
        elem.addEventListener(transitionendNames[i], handler, false);
    }
};
于 2012-10-10T16:14:54.913 に答える
3

これは古いことは知っていますが、追加したいのですが、style属性は、animationend/transitionendプレフィックスを検出するための良い方法であるとは限りません。たとえば、一部のAndroidブラウザーは、トランジションにプレフィックスを使用せず、JSイベントにwebkitAnimationEndを使用します。

于 2014-08-19T13:46:22.563 に答える
0

@ jfriend00の回答/例を使用すると、より軽量な検出を作成するのが簡単になります。

// cssPrefix is any method which detects the property name
var transition = cssPrefix('transition');

var transitionend = {
    'transition': 'transitionend',
    'webkitTransition': 'webkitTransitionEnd',
    'MozTransition': 'transitionend',
    'OTransition': 'oTransitionEnd'
}[transition];

実際の動作をご覧ください：http：//jsfiddle.net/mckamey/qWPTg/

于 2012-10-10T02:01:47.763 に答える