1

meteor では、css3 トランジションが終了したときに、次のイベント ハンドラーをトリガーする必要があります。

Template.flipper.events({
    "transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd": function (event) {
        console.log(this, event);
    }
});

ただし、複数のイベント タイプを受け入れないようです。

ただし、以下は Google Chrome で正常に動作します。

Template.flipper.events({
    "webkitTransitionEnd": function (event) {
        console.log(event);
    }
});

次のように、イベントを個別に割り当てることができます。

function transitionEnd(event) {
    console.log(event);
}

Template.flipper.events({
    transitionend: transitionEnd,
    webkitTransitionEnd: transitionEnd,
    oTransitionEnd: transitionEnd,
    MSTransitionEnd: transitionEnd
});

transitionendしかし現在、 vender-prefix なしでサポートする一部のブラウザー バージョンでは、イベントが 2 回発生します。

次のようなことができるように、どの偶数型がサポートされているかを調べたいと思います。

var flipperEvents = {};

flipperEvents[supportedEvents("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd")] = function (event) {
    console.log(event);
});

Template.flipper.events(flipperEvents);

では、最新のブラウザーとベンダー接頭辞付きのバージョンsupportedEventsを返す関数を実装するにはどうすればよいでしょうか?"transitionend"

使用するプレフィックスを評価するために、ブラウザーの種類の検出を使用しないことをお勧めします。

サポートされている偶数型を調べることができる場所はありませんか?

jQueryで簡単に実行できることはわかっていますが、これについてはjQueryを避けようとしています。

アップデート

ここにある方法を使用しようとしました:

var transitions = {
    'MozTransition': 'transitionend',
    'WebkitTransition': 'webkitTransitionEnd',
    'transition': 'transitionEnd',
    'MSTransition': 'msTransitionEnd',
    'OTransition': 'oTransitionEnd'
};


Template.flipper.rendered = function () {
    var flipper = this.find(".flipper"),
        eventMap = {},
        eventType;

    for (type in transitions) {
        if (type in flipper.style) {
            eventType = transitions[type];
            break;
        }
    }

    if (eventType) {
        eventMap[eventType] = function (event) {
            console.log(event);
        };

        console.log(eventMap);

        Template.flipper.events(eventMap);
    }

    transitions = {};
};

しかし、それもうまくいきません。テンプレートがレンダリングされた後、Meteor はイベント マップを許可しないためだと思います。

4

1 に答える 1