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