77 lines
2.3 KiB
JavaScript
77 lines
2.3 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
|
|
var _react = require('react');
|
|
|
|
var _react2 = _interopRequireDefault(_react);
|
|
|
|
var _Transition = require('react-transition-group/Transition');
|
|
|
|
var _Transition2 = _interopRequireDefault(_Transition);
|
|
|
|
var _glamor = require('glamor');
|
|
|
|
var _animation2 = require('./animation');
|
|
|
|
var _animation3 = _interopRequireDefault(_animation2);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
|
|
|
var animate = {
|
|
animationDuration: '0.75s',
|
|
animationFillMode: 'both'
|
|
};
|
|
|
|
var animation = function animation(pos) {
|
|
var _getAnimation = (0, _animation3.default)(pos),
|
|
enter = _getAnimation.enter,
|
|
exit = _getAnimation.exit;
|
|
|
|
var enterAnimation = _glamor.css.keyframes('enter', _extends({
|
|
'from, 60%, 75%, 90%, to': {
|
|
animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
|
|
}
|
|
}, enter));
|
|
var exitAnimation = _glamor.css.keyframes('exit', exit);
|
|
|
|
return {
|
|
enter: (0, _glamor.css)(_extends({}, animate, { animationName: enterAnimation })),
|
|
exit: (0, _glamor.css)(_extends({}, animate, { animationName: exitAnimation }))
|
|
};
|
|
};
|
|
|
|
function DefaultTransition(_ref) {
|
|
var children = _ref.children,
|
|
position = _ref.position,
|
|
props = _objectWithoutProperties(_ref, ['children', 'position']);
|
|
|
|
var _animation = animation(position),
|
|
enter = _animation.enter,
|
|
exit = _animation.exit;
|
|
|
|
return _react2.default.createElement(
|
|
_Transition2.default,
|
|
_extends({}, props, {
|
|
timeout: 750,
|
|
onEnter: function onEnter(node) {
|
|
return node.classList.add(enter);
|
|
},
|
|
onEntered: function onEntered(node) {
|
|
return node.classList.remove(enter);
|
|
},
|
|
onExit: function onExit(node) {
|
|
return node.classList.add(exit);
|
|
}
|
|
}),
|
|
children
|
|
);
|
|
}
|
|
|
|
exports.default = DefaultTransition; |