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 はイベント マップを許可しないためだと思います。