|
- 'use strict';
-
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.isCssAnimationSupported = undefined;
-
- var _typeof2 = require('babel-runtime/helpers/typeof');
-
- var _typeof3 = _interopRequireDefault(_typeof2);
-
- var _Event = require('./Event');
-
- var _Event2 = _interopRequireDefault(_Event);
-
- var _componentClasses = require('component-classes');
-
- var _componentClasses2 = _interopRequireDefault(_componentClasses);
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
- var isCssAnimationSupported = _Event2['default'].endEvents.length !== 0;
- var capitalPrefixes = ['Webkit', 'Moz', 'O',
- // ms is special .... !
- 'ms'];
- var prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', ''];
-
- function getStyleProperty(node, name) {
- // old ff need null, https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
- var style = window.getComputedStyle(node, null);
- var ret = '';
- for (var i = 0; i < prefixes.length; i++) {
- ret = style.getPropertyValue(prefixes[i] + name);
- if (ret) {
- break;
- }
- }
- return ret;
- }
-
- function fixBrowserByTimeout(node) {
- if (isCssAnimationSupported) {
- var transitionDelay = parseFloat(getStyleProperty(node, 'transition-delay')) || 0;
- var transitionDuration = parseFloat(getStyleProperty(node, 'transition-duration')) || 0;
- var animationDelay = parseFloat(getStyleProperty(node, 'animation-delay')) || 0;
- var animationDuration = parseFloat(getStyleProperty(node, 'animation-duration')) || 0;
- var time = Math.max(transitionDuration + transitionDelay, animationDuration + animationDelay);
- // sometimes, browser bug
- node.rcEndAnimTimeout = setTimeout(function () {
- node.rcEndAnimTimeout = null;
- if (node.rcEndListener) {
- node.rcEndListener();
- }
- }, time * 1000 + 200);
- }
- }
-
- function clearBrowserBugTimeout(node) {
- if (node.rcEndAnimTimeout) {
- clearTimeout(node.rcEndAnimTimeout);
- node.rcEndAnimTimeout = null;
- }
- }
-
- var cssAnimation = function cssAnimation(node, transitionName, endCallback) {
- var nameIsObj = (typeof transitionName === 'undefined' ? 'undefined' : (0, _typeof3['default'])(transitionName)) === 'object';
- var className = nameIsObj ? transitionName.name : transitionName;
- var activeClassName = nameIsObj ? transitionName.active : transitionName + '-active';
- var end = endCallback;
- var start = void 0;
- var active = void 0;
- var nodeClasses = (0, _componentClasses2['default'])(node);
-
- if (endCallback && Object.prototype.toString.call(endCallback) === '[object Object]') {
- end = endCallback.end;
- start = endCallback.start;
- active = endCallback.active;
- }
-
- if (node.rcEndListener) {
- node.rcEndListener();
- }
-
- node.rcEndListener = function (e) {
- if (e && e.target !== node) {
- return;
- }
-
- if (node.rcAnimTimeout) {
- clearTimeout(node.rcAnimTimeout);
- node.rcAnimTimeout = null;
- }
-
- clearBrowserBugTimeout(node);
-
- nodeClasses.remove(className);
- nodeClasses.remove(activeClassName);
-
- _Event2['default'].removeEndEventListener(node, node.rcEndListener);
- node.rcEndListener = null;
-
- // Usually this optional end is used for informing an owner of
- // a leave animation and telling it to remove the child.
- if (end) {
- end();
- }
- };
-
- _Event2['default'].addEndEventListener(node, node.rcEndListener);
-
- if (start) {
- start();
- }
- nodeClasses.add(className);
-
- node.rcAnimTimeout = setTimeout(function () {
- node.rcAnimTimeout = null;
- nodeClasses.add(activeClassName);
- if (active) {
- setTimeout(active, 0);
- }
- fixBrowserByTimeout(node);
- // 30ms for firefox
- }, 30);
-
- return {
- stop: function stop() {
- if (node.rcEndListener) {
- node.rcEndListener();
- }
- }
- };
- };
-
- cssAnimation.style = function (node, style, callback) {
- if (node.rcEndListener) {
- node.rcEndListener();
- }
-
- node.rcEndListener = function (e) {
- if (e && e.target !== node) {
- return;
- }
-
- if (node.rcAnimTimeout) {
- clearTimeout(node.rcAnimTimeout);
- node.rcAnimTimeout = null;
- }
-
- clearBrowserBugTimeout(node);
-
- _Event2['default'].removeEndEventListener(node, node.rcEndListener);
- node.rcEndListener = null;
-
- // Usually this optional callback is used for informing an owner of
- // a leave animation and telling it to remove the child.
- if (callback) {
- callback();
- }
- };
-
- _Event2['default'].addEndEventListener(node, node.rcEndListener);
-
- node.rcAnimTimeout = setTimeout(function () {
- for (var s in style) {
- if (style.hasOwnProperty(s)) {
- node.style[s] = style[s];
- }
- }
- node.rcAnimTimeout = null;
- fixBrowserByTimeout(node);
- }, 0);
- };
-
- cssAnimation.setTransition = function (node, p, value) {
- var property = p;
- var v = value;
- if (value === undefined) {
- v = property;
- property = '';
- }
- property = property || '';
- capitalPrefixes.forEach(function (prefix) {
- node.style[prefix + 'Transition' + property] = v;
- });
- };
-
- cssAnimation.isCssAnimationSupported = isCssAnimationSupported;
-
- exports.isCssAnimationSupported = isCssAnimationSupported;
- exports['default'] = cssAnimation;
|