1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _react = require('react');
|
12 |
|
13 | var _react2 = _interopRequireDefault(_react);
|
14 |
|
15 | var _utils = require('./utils');
|
16 |
|
17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
18 |
|
19 | exports['default'] = {
|
20 | across: function across(elem, type, direction, animData, elemOffset, leaveChildHide) {
|
21 | var _x = void 0;
|
22 | var props = (0, _extends3['default'])({}, elem.props);
|
23 | var children = props.children;
|
24 | if (type === 'enter') {
|
25 | _x = direction === 'next' ? '100%' : '-100%';
|
26 | } else {
|
27 |
|
28 | _x = direction === 'next' ? '-100%' : '100%';
|
29 | children = (0, _utils.toArrayChildren)(children).map(_utils.switchChildren.bind(this, leaveChildHide));
|
30 | }
|
31 | return (0, _react.cloneElement)(elem, {
|
32 | animation: (0, _extends3['default'])({}, animData, {
|
33 | x: _x,
|
34 | type: type === 'enter' ? 'from' : 'to'
|
35 | })
|
36 | }, children);
|
37 | },
|
38 | vertical: function vertical(elem, type, direction, animData, elemOffset, leaveChildHide) {
|
39 | var _y = void 0;
|
40 | var props = (0, _extends3['default'])({}, elem.props);
|
41 | var children = props.children;
|
42 | if (type === 'enter') {
|
43 | _y = direction === 'next' ? '-100%' : '100%';
|
44 | } else {
|
45 |
|
46 | _y = direction === 'next' ? '100%' : '-100%';
|
47 | children = (0, _utils.toArrayChildren)(children).map(_utils.switchChildren.bind(this, leaveChildHide));
|
48 | }
|
49 | return (0, _react.cloneElement)(elem, (0, _extends3['default'])({}, props, {
|
50 | animation: (0, _extends3['default'])({}, animData, {
|
51 | y: _y,
|
52 | type: type === 'enter' ? 'from' : 'to'
|
53 | })
|
54 | }), children);
|
55 | },
|
56 | acrossOverlay: function acrossOverlay(elem, type, direction, animData, elemOffset, leaveChildHide) {
|
57 | var _x = void 0;
|
58 | var props = (0, _extends3['default'])({}, elem.props);
|
59 | var children = props.children;
|
60 | if (type === 'enter') {
|
61 | _x = direction === 'next' ? '100%' : '-100%';
|
62 | } else {
|
63 | _x = direction === 'next' ? '-20%' : '20%';
|
64 | children = (0, _utils.toArrayChildren)(children).map(_utils.switchChildren.bind(this, leaveChildHide));
|
65 | }
|
66 | return (0, _react.cloneElement)(elem, (0, _extends3['default'])({}, props, {
|
67 | animation: (0, _extends3['default'])({}, animData, {
|
68 | x: _x,
|
69 | type: type === 'enter' ? 'from' : 'to'
|
70 | })
|
71 | }), children);
|
72 | },
|
73 | verticalOverlay: function verticalOverlay(elem, type, direction, animData, elemOffset, leaveChildHide) {
|
74 | var _y = void 0;
|
75 | var props = (0, _extends3['default'])({}, elem.props);
|
76 | var children = props.children;
|
77 | if (type === 'enter') {
|
78 | _y = direction === 'next' ? '-100%' : '100%';
|
79 | } else {
|
80 | _y = direction === 'next' ? '20%' : '-20%';
|
81 | children = (0, _utils.toArrayChildren)(children).map(_utils.switchChildren.bind(this, leaveChildHide));
|
82 | }
|
83 | return (0, _react.cloneElement)(elem, (0, _extends3['default'])({}, props, {
|
84 | animation: (0, _extends3['default'])({}, animData, {
|
85 | y: _y,
|
86 | type: type === 'enter' ? 'from' : 'to'
|
87 | })
|
88 | }), children);
|
89 | },
|
90 | gridBar: function gridBar(elem, type, direction, animData, elemOffset, leaveChildHide, ratio, paused) {
|
91 | var props = (0, _extends3['default'])({}, elem.props);
|
92 | var animChild = [];
|
93 | var gridNum = 10;
|
94 | var girdSize = 100 / gridNum;
|
95 |
|
96 | var _y = void 0;
|
97 | var children = props.children;
|
98 | if (type === 'enter') {
|
99 | _y = direction === 'next' ? '-100%' : '100%';
|
100 | } else {
|
101 | _y = direction === 'next' ? '100%' : '-100%';
|
102 | children = (0, _utils.toArrayChildren)(children).map(_utils.setAnimCompToTagComp);
|
103 | }
|
104 | var moment = ratio * (animData.duration + animData.delay + gridNum * 50 - (type === 'enter' ? 50 : 0)) || 0;
|
105 | for (var i = 0; i < gridNum; i++) {
|
106 | var style = (0, _extends3['default'])({}, props.style);
|
107 | style.width = girdSize + 0.1 + '%';
|
108 | style.left = i * girdSize + '%';
|
109 | style.position = 'absolute';
|
110 | style.overflow = 'hidden';
|
111 | var _style = (0, _extends3['default'])({}, props.style);
|
112 | _style.width = elemOffset.width + 'px';
|
113 | _style.height = elemOffset.height + 'px';
|
114 | _style.float = 'left';
|
115 | _style.position = 'relative';
|
116 | _style.left = -i * girdSize / 100 * elemOffset.width + 'px';
|
117 | var animProps = (0, _extends3['default'])({}, props);
|
118 | animProps.style = _style;
|
119 | var delay = (direction === 'next' ? i : gridNum - i) * 50 + (type === 'enter' ? 0 : 50) + (animData.delay || 0);
|
120 | animProps.animation = (0, _extends3['default'])({}, animData, {
|
121 | y: _y,
|
122 | type: type === 'enter' ? 'from' : 'to',
|
123 | key: type,
|
124 | direction: direction,
|
125 | delay: delay,
|
126 | i: i,
|
127 | onComplete: i === (direction === 'next' ? gridNum - 1 : 0) ? animData.onComplete : null
|
128 | });
|
129 | animProps.paused = paused;
|
130 | animProps.moment = moment;
|
131 | var mask = _react2['default'].createElement(
|
132 | 'div',
|
133 | { style: style, key: i },
|
134 | (0, _react.cloneElement)(elem, animProps, children)
|
135 | );
|
136 | animChild.push(mask);
|
137 | }
|
138 | var animSlot = _react2['default'].createElement(
|
139 | 'div',
|
140 | { style: { width: '100%', position: 'absolute', top: 0 } },
|
141 | animChild
|
142 | );
|
143 | var _props = (0, _extends3['default'])({}, elem.props);
|
144 | _props.children = animSlot;
|
145 | return (0, _react.cloneElement)(elem, (0, _extends3['default'])({}, _props, { animation: { x: 0, y: 0, type: 'set' } }));
|
146 | },
|
147 | grid: function grid(elem, type, direction, animData, elemOffset, leaveChildHide, ratio, paused) {
|
148 | var props = (0, _extends3['default'])({}, elem.props);
|
149 | var animChild = [];
|
150 | var gridNum = 10;
|
151 | var gridWidth = elemOffset.width / gridNum;
|
152 | var gridNumH = Math.ceil(elemOffset.height / gridWidth);
|
153 | var _delay = (gridNum - 1) * 50 + (gridNumH - 1) * 50;
|
154 | if (type === 'leave') {
|
155 | props.animation = (0, _extends3['default'])({}, animData, {
|
156 | duration: _delay + animData.duration
|
157 | });
|
158 | props.moment = ((animData.delay || 0) + _delay + animData.duration) * ratio || 0;
|
159 | props.paused = paused;
|
160 | return _react2['default'].cloneElement(elem, props);
|
161 | }
|
162 | var moment = ratio * (animData.duration + animData.delay + _delay) || 0;
|
163 | for (var i = 0; i < gridNum * gridNumH; i++) {
|
164 |
|
165 | var style = (0, _extends3['default'])({}, props.style);
|
166 | style.position = 'absolute';
|
167 | style.overflow = 'hidden';
|
168 | style.width = gridWidth + 1 + 'px';
|
169 | style.height = gridWidth + 1 + 'px';
|
170 | style.left = i % gridNum * gridWidth;
|
171 | style.top = Math.floor(i / gridNum) * gridWidth;
|
172 |
|
173 | var _style = (0, _extends3['default'])({}, props.style);
|
174 | _style.width = elemOffset.width + 'px';
|
175 | _style.height = elemOffset.height + 'px';
|
176 | _style.position = 'relative';
|
177 | _style.left = -i % gridNum * gridWidth;
|
178 | _style.top = -Math.floor(i / gridNum) * gridWidth;
|
179 | props.style = _style;
|
180 | var delay = direction === 'next' ? i % gridNum * 50 + Math.floor(i / gridNum) * 50 : (gridNum - 1 - i % gridNum) * 50 + (gridNumH - 1 - Math.floor(i / gridNum)) * 50;
|
181 | delay += animData.delay || 0;
|
182 | var length = direction === 'next' ? gridNum * gridNumH - 1 : 0;
|
183 | var animation = (0, _extends3['default'])({}, animData, {
|
184 | opacity: 0,
|
185 | type: 'from',
|
186 | delay: delay,
|
187 | onComplete: i === length ? animData.onComplete : null
|
188 | });
|
189 | var mask = _react2['default'].createElement(
|
190 | elem.type,
|
191 | {
|
192 | style: style,
|
193 | key: i,
|
194 | paused: paused,
|
195 | animation: animation,
|
196 | moment: moment
|
197 | },
|
198 | (0, _react.cloneElement)(elem, props)
|
199 | );
|
200 | animChild.push(mask);
|
201 | }
|
202 | var _props = (0, _extends3['default'])({}, elem.props);
|
203 | _props.children = animChild;
|
204 | return (0, _react.cloneElement)(elem, (0, _extends3['default'])({}, _props, { animation: { x: 0, y: 0, type: 'set' } }));
|
205 | }
|
206 | };
|
207 | module.exports = exports['default']; |
\ | No newline at end of file |