1

在流星中，当 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。

更新

我尝试使用此处找到的方法：

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

0

我无法创建像 一样通用的函数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 中工作。尚未测试其他浏览器。

于 2013-11-03T17:29:12.693 回答