Question

在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而没有使用者前缀的某些浏览器版本上，该事件将触发两次。

我想找出支持哪种偶数类型，以便我可以这样做：

var flipperEvents = {};

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

Template.flipper.events(flipperEvents);

现在我将如何实现为更现代的浏览器返回supportedEvents的函数"transitionend"以及其他以供应商为前缀的版本？

我宁愿不使用浏览器类型检测来评估要使用的前缀。

是否有一些地方我可以查看甚至支持哪些类型？

我知道它可以在jQuery中轻松完成，但我试图避免使用jQuery。

更新

我尝试使用method found here：

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在渲染模板后不允许使用事件贴图。

Answer 1

我无法创建与supportedEvents一样的通用功能，但以下功能实现了目标：

var transitions = {
        'MozTransition': 'transitionend',
        'WebkitTransition': 'webkitTransitionEnd',
        'transition': 'transitionEnd',
        'MSTransition': 'msTransitionEnd',
        'OTransition': 'oTransitionEnd'
    },
    probe = document.createElement("div"),
    eventType;

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

if (eventType) {
    var eventMap = {};

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

    Template.flipper.events(eventMap);
}

到目前为止，适用于Chrome和Mozilla。还没有测试过其他浏览器。

找出可用的事件类型

更新

1 个答案: