ReactTransitionEvents

ReactTransitionEvents模块用于绑点或解绑animationend、transitionend事件。

 

'use strict';

// 检测平台如浏览器的部分能力
var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');

// 针对浏览器兼容性获取不同的事件名，如animationend、webkitanimationend、mozanimationend、MSanimationend、oanimationend
var getVendorPrefixedEventName = require('react-dom/lib/getVendorPrefixedEventName');

// 缓存当前浏览器下支持的animationend、transitionend事件名
var endEvents = [];

function detectEvents() {
  var animEnd = getVendorPrefixedEventName('animationend');
  var transEnd = getVendorPrefixedEventName('transitionend');

  if (animEnd) {
    endEvents.push(animEnd);
  }

  if (transEnd) {
    endEvents.push(transEnd);
  }
}

if (ExecutionEnvironment.canUseDOM) {
  detectEvents();
}

function addEventListener(node, eventName, eventListener) {
  node.addEventListener(eventName, eventListener, false);
}

function removeEventListener(node, eventName, eventListener) {
  node.removeEventListener(eventName, eventListener, false);
}

var ReactTransitionEvents = {
  // 监听animationend、transitionend事件
  addEndEventListener: function (node, eventListener) {
    if (endEvents.length === 0) {
      window.setTimeout(eventListener, 0);
      return;
    }
    endEvents.forEach(function (endEvent) {
      addEventListener(node, endEvent, eventListener);
    });
  },

  // 解绑animationend、transitionend事件
  removeEndEventListener: function (node, eventListener) {
    if (endEvents.length === 0) {
      return;
    }
    endEvents.forEach(function (endEvent) {
      removeEventListener(node, endEvent, eventListener);
    });
  }
};

module.exports = ReactTransitionEvents;