Skip to content

Commit 212fdba

Browse files
jljsj33jljsj33
committed
fix 0.12.0
1 parent 18b71f9 commit 212fdba

File tree

2 files changed

+75
-48
lines changed

2 files changed

+75
-48
lines changed

‎src/QueueAnim.jsx

Lines changed: 53 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,8 @@ import {
9595
mergeChildren,
9696
transformArguments,
9797
getChildrenFromProps,
98+
assignChild,
99+
checkStyleName,
98100
} from './utils';
99101
import AnimTypes from './animTypes';
100102
const BackEase = {
@@ -149,16 +151,21 @@ class QueueAnim extends React.Component {
149151
currentChildren,
150152
nextChildren
151153
);
152-
// 在出场没结束时，childrenShow 里的值将不会清除。再触发进场时， childrenShow 里的值是保留着的，所以在这做下清除。
154+
153155
const childrenShow = this.state.childrenShow;
154-
newChildren.forEach(item => {
155-
if (this.keysToLeave.indexOf(item.key) >= 0) {
156-
const node = this.refs[item.key];
157-
// 因为进场是用的间隔性进入，这里不做 stop 处理将会在这间隔里继续出场的动画。。
158-
velocity(node, 'stop');
159-
delete childrenShow[item.key];
160-
}
161-
});
156+
if (nextProps.enterForcedRePlay) {
157+
// 在出场没结束时，childrenShow 里的值将不会清除。再触发进场时， childrenShow 里的值是保留着的，所以在这做下清除。
158+
newChildren.forEach(item => {
159+
if (this.keysToLeave.indexOf(item.key) >= 0) {
160+
const node = this.refs[item.key];
161+
// 因为进场是用的间隔性进入，这里不做 stop 处理将会在这间隔里继续出场的动画。。
162+
velocity(node, 'stop');
163+
delete childrenShow[item.key];
164+
}
165+
});
166+
}
167+
168+
162169
this.keysToEnter = [];
163170
this.keysToLeave = [];
164171
this.keysAnimating = [];
@@ -247,6 +254,36 @@ class QueueAnim extends React.Component {
247254
});
248255
}
249256

257+
getInitAnimType = (node, _data) => {
258+
/*
259+
* 强行结束后，获取当前 dom 里是否有 data 里的 key 值，如果有，出场开始启动为 dom 里的值
260+
* 而不是 animTypes 里的初始值，如果是 初始值将会跳动。
261+
*/
262+
const data = Object.assign({}, assignChild(_data));
263+
const transformsBase = velocity &&
264+
velocity.prototype.constructor.CSS.Lists.transformsBase || [];
265+
// const setPropertyValue = velocity.prototype.constructor.CSS.setPropertyValue;
266+
// const getUnitType = velocity.prototype.constructor.CSS.Values.getUnitType;
267+
const nodeStyle = node.style;
268+
Object.keys(data).forEach(dataKey => {
269+
if (transformsBase.indexOf(dataKey) >= 0) {
270+
const transformString = nodeStyle[checkStyleName('transform')];
271+
if (transformString && transformString !== 'none') {
272+
if (transformString.match(dataKey)) {
273+
const rep = new RegExp(`^.*${dataKey}\\(([^\\)]+?)\\).*`, 'i');
274+
const transformData = transformString.replace(rep, '$1');
275+
data[dataKey][1] = parseFloat(transformData);
276+
return;
277+
}
278+
}
279+
}
280+
if (nodeStyle[dataKey] && parseFloat(nodeStyle[dataKey])) {
281+
data[dataKey][1] = parseFloat(nodeStyle[dataKey]);
282+
}
283+
});
284+
return data;
285+
};
286+
250287
performEnter(key, i) {
251288
const interval = transformArguments(this.props.interval, key, i)[0];
252289
const delay = transformArguments(this.props.delay, key, i)[0];
@@ -271,26 +308,16 @@ class QueueAnim extends React.Component {
271308
return;
272309
}
273310
const duration = transformArguments(this.props.duration, key, i)[0];
274-
node.style.visibility = 'hidden';
275311
velocity(node, 'stop');
276-
velocity(node, this.getVelocityEnterConfig(key, i), {
312+
const data = this.getInitAnimType(node, this.getVelocityEnterConfig(key, i));
313+
velocity(node, data, {
277314
duration,
278315
easing: this.getVelocityEasing(key, i)[0],
279-
visibility: 'visible',
280316
begin: this.enterBegin.bind(this, key),
281317
complete: this.enterComplete.bind(this, key),
282318
});
283319
}
284320

285-
checkStyleName = (p) => {
286-
const a = ['O', 'Moz', 'ms', 'Ms', 'Webkit'];
287-
if (p !== 'filter' && p in document.body.style) {
288-
return p;
289-
}
290-
const _p = p.charAt(0).toUpperCase() + p.substr(1);
291-
return `${(a.filter((key) => `${key}${_p}` in document.body.style)[0] || '')}${_p}`;
292-
};
293-
294321
performLeave(key, i) {
295322
clearTimeout(this.placeholderTimeoutIds[key]);
296323
delete this.placeholderTimeoutIds[key];
@@ -303,33 +330,9 @@ class QueueAnim extends React.Component {
303330
const duration = transformArguments(this.props.duration, key, i)[1];
304331
const order = this.props.leaveReverse ? (this.keysToLeave.length - i - 1) : i;
305332
velocity(node, 'stop');
306-
/*
307-
* 强行结束后，获取当前 dom 里是否有 data 里的 key 值，如果有，出场开始启动为 dom 里的值
308-
* 而不是 animTypes 里的初始值，如果是 初始值将会跳动。
309-
*/
310-
const data = { ...this.getVelocityLeaveConfig(key, i) };
311-
const transformsBase = velocity &&
312-
velocity.prototype.constructor.CSS.Lists.transformsBase || [];
313-
// const setPropertyValue = velocity.prototype.constructor.CSS.setPropertyValue;
314-
// const getUnitType = velocity.prototype.constructor.CSS.Values.getUnitType;
315-
const nodeStyle = node.style;
316-
Object.keys(data).forEach(dataKey => {
317-
if (transformsBase.indexOf(dataKey) >= 0) {
318-
const transformString = nodeStyle[this.checkStyleName('transform')];
319-
if (transformString && transformString !== 'none') {
320-
if (transformString.match(dataKey)) {
321-
const rep = new RegExp(`[^${dataKey}\\(\\d+.*\\)]`, 'i');
322-
const rep2 = new RegExp(`${dataKey}\\(([\\s\\S]+)\\)`, 'i');
323-
const transformData = transformString.replace(rep, '').replace(rep2, '$1');
324-
data[dataKey][1] = parseFloat(transformData);
325-
return;
326-
}
327-
}
328-
}
329-
if (nodeStyle[dataKey] && parseFloat(nodeStyle[dataKey])) {
330-
data[dataKey][1] = parseFloat(nodeStyle[dataKey]);
331-
}
332-
});
333+
334+
const data = this.getInitAnimType(node, this.getVelocityLeaveConfig(key, i));
335+
333336
velocity(node, data, {
334337
delay: interval * order + delay,
335338
duration,
@@ -415,6 +418,7 @@ class QueueAnim extends React.Component {
415418
'ease',
416419
'leaveReverse',
417420
'animatingClassName',
421+
'enterForcedRePlay',
418422
].forEach(key => delete tagProps[key]);
419423
return createElement(this.props.component, { ...tagProps }, childrenToRender);
420424
}
@@ -449,6 +453,7 @@ QueueAnim.defaultProps = {
449453
animConfig: null,
450454
ease: 'easeOutQuart',
451455
leaveReverse: false,
456+
enterForcedRePlay: false,
452457
animatingClassName: ['queue-anim-entering', 'queue-anim-leaving'],
453458
};
454459

‎src/utils.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,3 +83,25 @@ export function transformArguments(arg, key, i) {
8383
export function getChildrenFromProps(props) {
8484
return props && props.children;
8585
}
86+
87+
export function assignChild(data) {
88+
const obj = {};
89+
Object.keys(data).forEach(key => {
90+
if (Array.isArray(data[key])) {
91+
obj[key] = [].concat(data[key]);
92+
return;
93+
}
94+
obj[key] = data[key];
95+
return;
96+
});
97+
return obj;
98+
}
99+
100+
export function checkStyleName(p) {
101+
const a = ['O', 'Moz', 'ms', 'Ms', 'Webkit'];
102+
if (p !== 'filter' && p in document.body.style) {
103+
return p;
104+
}
105+
const _p = p.charAt(0).toUpperCase() + p.substr(1);
106+
return `${(a.filter((key) => `${key}${_p}` in document.body.style)[0] || '')}${_p}`;
107+
}

0 commit comments

Comments
 (0)