Skip to content

Commit 3afd467

Browse files
jljsj33jljsj33
committed
fix #49 
1 parent 388f209 commit 3afd467

File tree

10 files changed

+80
-87
lines changed

10 files changed

+80
-87
lines changed

‎examples/animating-class.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import QueueAnim from 'rc-queue-anim';
33
import React from 'react';
44
import ReactDom from 'react-dom';
5-
import '../assets/animating-class.less';
5+
import './assets/animating-class.less';
66

77
class App extends React.Component {
88
constructor(props) {

assets/animating-class.less renamed to examples/assets/animating-class.less

File renamed without changes.

assets/router.less renamed to examples/assets/router.less

File renamed without changes.

assets/switch.less renamed to examples/assets/switch.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.switch {
22
height: 400px;
33
background: #CCC;
4+
padding: 40px 0;
45
& ul {
56
display: block;
67
width: 100%;

‎examples/router.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { HashRouter as Router, Route, Link, Redirect } from 'react-router-dom';
33
import QueueAnim from 'rc-queue-anim';
44
import React from 'react';
55
import ReactDom from 'react-dom';
6-
import '../assets/router.less';
6+
import './assets/router.less';
77

88
class Home extends React.Component {
99
render() {

‎examples/switch-enterForcedRePlay.js‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import QueueAnim from 'rc-queue-anim';
33
import React from 'react';
44
import ReactDom from 'react-dom';
5-
import '../assets/switch.less';
5+
import './assets/switch.less';
66

77
class Demo extends React.Component {
88
constructor() {
@@ -40,17 +40,20 @@ class Demo extends React.Component {
4040

4141
render() {
4242
const childrenToRender = this.getChildren();
43-
return (<div className="switch" onMouseEnter={this.onEnter} onMouseLeave={this.onLeave}>
43+
return (<div>
4444
<h2>鼠标经过当前区域，再移出区域查看</h2>
45-
<QueueAnim component="ul" leaveReverse delay={[0, 300]} type="scale" enterForcedRePlay>
46-
{childrenToRender}
47-
</QueueAnim>
48-
<QueueAnim component="ul" leaveReverse delay={150} type="scale" enterForcedRePlay>
49-
{childrenToRender}
50-
</QueueAnim>
51-
<QueueAnim component="ul" leaveReverse delay={[300, 0]} type="scale" enterForcedRePlay>
52-
{childrenToRender}
53-
</QueueAnim>
45+
<p>清除所有还在动画的参素并设置切换时的初始参数</p>
46+
<div className="switch" onMouseEnter={this.onEnter} onMouseLeave={this.onLeave}>
47+
<QueueAnim component="ul" leaveReverse delay={[0, 300]} type="scale" enterForcedRePlay>
48+
{childrenToRender}
49+
</QueueAnim>
50+
<QueueAnim component="ul" leaveReverse delay={150} type="scale" enterForcedRePlay>
51+
{childrenToRender}
52+
</QueueAnim>
53+
<QueueAnim component="ul" leaveReverse delay={[300, 0]} type="scale" enterForcedRePlay>
54+
{childrenToRender}
55+
</QueueAnim>
56+
</div>
5457
</div>);
5558
}
5659
}

‎examples/switch.js‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import QueueAnim from 'rc-queue-anim';
33
import React from 'react';
44
import ReactDom from 'react-dom';
5-
import '../assets/switch.less';
5+
import './assets/switch.less';
66

77
class Demo extends React.Component {
88
constructor() {
@@ -40,17 +40,19 @@ class Demo extends React.Component {
4040

4141
render() {
4242
const childrenToRender = this.getChildren();
43-
return (<div className="switch" onMouseEnter={this.onEnter} onMouseLeave={this.onLeave}>
43+
return (<div>
4444
<h2>鼠标经过当前区域，再移出区域查看</h2>
45-
<QueueAnim component="ul" leaveReverse delay={[0, 300]} type="scale">
46-
{childrenToRender}
47-
</QueueAnim>
48-
<QueueAnim component="ul" leaveReverse delay={150} type="scale">
49-
{childrenToRender}
50-
</QueueAnim>
51-
<QueueAnim component="ul" leaveReverse delay={[300, 0]} type="scale">
52-
{childrenToRender}
53-
</QueueAnim>
45+
<div className="switch" onMouseEnter={this.onEnter} onMouseLeave={this.onLeave}>
46+
<QueueAnim component="ul" leaveReverse delay={[0, 300]} type="scale">
47+
{childrenToRender}
48+
</QueueAnim>
49+
<QueueAnim component="ul" leaveReverse delay={150} type="scale">
50+
{childrenToRender}
51+
</QueueAnim>
52+
<QueueAnim component="ul" leaveReverse delay={[300, 0]} type="scale">
53+
{childrenToRender}
54+
</QueueAnim>
55+
</div>
5456
</div>);
5557
}
5658
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "rc-queue-anim",
3-
"version": "1.3.1",
3+
"version": "1.4.0",
44
"description": "Queue animation component for react",
55
"keywords": [
66
"react",

‎src/QueueAnim.jsx‎

Lines changed: 37 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,9 @@ class QueueAnim extends React.Component {
5353
constructor(props) {
5454
super(props);
5555
this.oneEnter = false;
56-
this.tweenKeyType = {};
56+
this.tweenToShow = {};
5757
this.keysToEnter = [];
5858
this.keysToLeave = [];
59-
this.saveTweenAnim = {};
6059
this.keysToEnterPaused = {};
6160
this.placeholderTimeoutIds = {};
6261
// 第一次进入，默认进场
@@ -196,11 +195,7 @@ class QueueAnim extends React.Component {
196195
const end = type === 'enter' ? 0 : 1;
197196
let startAnim = this.getAnimData(props, key, i, enterOrLeave, start);
198197
const animate = this.getAnimData(props, key, i, enterOrLeave, end);
199-
/**
200-
* 如果 this.tweenKeyType[key] 为空时，为第一次触发，需要设置开始。
201-
* 如果 this.tweenKeyType[key] 有值时，说明正在动画，此时切换不需要开始。
202-
*/
203-
startAnim = props.enterForcedRePlay || !this.tweenKeyType[key] || !this.saveTweenAnim[key] ?
198+
startAnim = (type === 'enter' && props.enterForcedRePlay) || !this.tweenToShow[key] ?
204199
startAnim : {};
205200
let ease = transformArguments(props.ease, key, i)[enterOrLeave];
206201
const duration = transformArguments(props.duration, key, i)[enterOrLeave];
@@ -278,48 +273,40 @@ class QueueAnim extends React.Component {
278273
return child;
279274
}
280275
const key = child.key;
276+
if (!this.state.childrenShow[key]) {
277+
return null;
278+
}
281279
let i = this.keysToLeave.indexOf(key);
282-
if ((i >= 0 && this.state.childrenShow[key])
283-
|| this.state.childrenShow[key]) {
284-
let animation;
285-
if (i >= 0) {
286-
if (this.tweenKeyType[key] === 'leave' && this.saveTweenAnim[key]) {
287-
animation = this.saveTweenAnim[key];
288-
} else {
289-
const interval = transformArguments(this.props.interval, key, i)[1];
290-
let delay = transformArguments(this.props.delay, key, i)[1];
291-
const order = this.props.leaveReverse ? (this.keysToLeave.length - i - 1) : i;
292-
delay = interval * order + delay;
293-
animation = this.getTweenEnterOrLeaveData(key, i, delay, 'leave');
294-
this.saveTweenAnim[key] = animation;
295-
}
280+
let animation;
281+
// 处理出场
282+
if (i >= 0) {
283+
const interval = transformArguments(this.props.interval, key, i)[1];
284+
let delay = transformArguments(this.props.delay, key, i)[1];
285+
const order = this.props.leaveReverse ? (this.keysToLeave.length - i - 1) : i;
286+
delay = interval * order + delay;
287+
animation = this.getTweenEnterOrLeaveData(key, i, delay, 'leave');
288+
} else {
289+
// 处理进场;
290+
i = this.keysToEnterToCallback.indexOf(key);
291+
if (!this.oneEnter && !this.props.appear) {
292+
animation = this.getTweenAppearData(key, i);
296293
} else {
297-
i = this.keysToEnterToCallback.indexOf(key);
298-
if (!this.oneEnter && !this.props.appear) {
299-
animation = this.getTweenAppearData(key, i);
300-
} else if (this.tweenKeyType[key] === 'enter' && this.saveTweenAnim[key]) {
301-
animation = this.saveTweenAnim[key];
302-
} else {
303-
animation = this.getTweenEnterOrLeaveData(key, i, 0, 'enter');
304-
this.saveTweenAnim[key] = animation;
305-
}
294+
animation = this.getTweenEnterOrLeaveData(key, i, 0, 'enter');
306295
}
307-
const paused = this.keysToEnterPaused[key]
308-
&& !(this.keysToLeave.indexOf(key) >= 0 && this.state.childrenShow[key]);
309-
animation = paused ? null : animation;
310-
const isFunc = typeof child.type === 'function';
311-
const forcedJudg = isFunc ? {} : null;
312-
if (isFunc) {
313-
Object.keys(child.type).forEach(name => {
314-
if (typeDefault.indexOf(name) === -1) {
315-
forcedJudg[name] = child.type[name];
316-
}
317-
});
318-
}
319-
return createElement(TweenOne,
320-
{ key, component: child.type, componentProps: child.props, forcedJudg, animation });
321296
}
322-
return null;
297+
const paused = this.keysToEnterPaused[key] && !this.keysToLeave.indexOf(key) >= 0;
298+
animation = paused ? null : animation;
299+
const isFunc = typeof child.type === 'function';
300+
const forcedJudg = isFunc ? {} : null;
301+
if (isFunc) {
302+
Object.keys(child.type).forEach(name => {
303+
if (typeDefault.indexOf(name) === -1) {
304+
forcedJudg[name] = child.type[name];
305+
}
306+
});
307+
}
308+
return createElement(TweenOne,
309+
{ key, component: child.type, componentProps: child.props, forcedJudg, animation });
323310
};
324311

325312
performEnter = (key, i) => {
@@ -332,7 +319,6 @@ class QueueAnim extends React.Component {
332319
if (this.keysToEnter.indexOf(key) >= 0) {
333320
this.keysToEnter.splice(this.keysToEnter.indexOf(key), 1);
334321
}
335-
this.tweenKeyType[key] = 'enter';
336322
}
337323

338324
performEnterBegin = (key) => {
@@ -347,34 +333,33 @@ class QueueAnim extends React.Component {
347333
performLeave = (key) => {
348334
ticker.clear(this.placeholderTimeoutIds[key]);
349335
delete this.placeholderTimeoutIds[key];
350-
this.tweenKeyType[key] = 'leave';
351336
}
352337

353338
enterBegin = (key, e) => {
354339
const elem = e.target;
355340
const animatingClassName = this.props.animatingClassName;
356341
elem.className = elem.className.replace(animatingClassName[1], '');
357342
if (elem.className.indexOf(animatingClassName[0]) === -1) {
358-
elem.className += (`${elem.className ? ' ' : ''}${animatingClassName[0]}`);
343+
elem.className = (`${elem.className} ${animatingClassName[0]}`).trim();
359344
}
345+
this.tweenToShow[key] = true;
360346
}
361347

362348
enterComplete = (key, e) => {
363-
if (this.keysToEnterPaused[key]) {
349+
if (this.keysToEnterPaused[key] || this.keysToLeave.indexOf(key) >= 0) {
364350
return;
365351
}
366352
const elem = e.target;
367353
elem.className = elem.className.replace(this.props.animatingClassName[0], '').trim();
368354
this.props.onEnd({ key, type: 'enter' });
369-
delete this.tweenKeyType[key];
370355
}
371356

372357
leaveBegin = (key, e) => {
373358
const elem = e.target;
374359
const animatingClassName = this.props.animatingClassName;
375360
elem.className = elem.className.replace(animatingClassName[0], '');
376361
if (elem.className.indexOf(animatingClassName[1]) === -1) {
377-
elem.className += (` ${animatingClassName[1]}`);
362+
elem.className = (`${elem.className} ${animatingClassName[1]}`).trim();
378363
}
379364
}
380365

@@ -387,8 +372,7 @@ class QueueAnim extends React.Component {
387372
delete childrenShow[key];
388373
if (this.keysToLeave.indexOf(key) >= 0) {
389374
this.keysToLeave.splice(this.keysToLeave.indexOf(key), 1);
390-
delete this.saveTweenAnim[key];
391-
delete this.tweenKeyType[key];
375+
delete this.tweenToShow[key];
392376
}
393377
const needLeave = this.keysToLeave.some(c => childrenShow[c]);
394378
if (!needLeave) {

‎tests/index.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ describe('rc-queue-anim', () => {
238238
expect(getLeft(children[1])).to.be(100);
239239
expect(getTop(children[1])).to.be(100);
240240
done();
241-
}, 917);
241+
}, 1000);
242242
});
243243

244244
it('should support animation when change direction at animating', (done) => {
@@ -285,14 +285,17 @@ describe('rc-queue-anim', () => {
285285
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
286286
expect(children[1].className).to.contain('queue-anim-entering');
287287
ticker.timeout(() => {
288+
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
288289
expect(children[1].className).not.to.contain('queue-anim-entering');
289290
const removeIndex = instance.removeOne();
290-
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
291-
expect(children[removeIndex + 1].className).to.contain('queue-anim-leaving');
292291
ticker.timeout(() => {
293-
expect(children[removeIndex + 1].className).not.to.contain('queue-anim-leaving');
294-
done();
295-
}, 550);
292+
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
293+
expect(children[removeIndex + 1].className).to.contain('queue-anim-leaving');
294+
ticker.timeout(() => {
295+
expect(children[removeIndex + 1].className).not.to.contain('queue-anim-leaving');
296+
done();
297+
}, 550);
298+
}, 18);
296299
}, 550);
297300
}, 18);
298301
});
@@ -326,14 +329,14 @@ describe('rc-queue-anim', () => {
326329
expect(isNaN(getLeft(children[2]))).to.be.ok();
327330
console.log('top_end:', getTop(children[2]));
328331
done();
329-
}, 517);// +17 帧为 tween-one 补帧。。。。complete 在时间结束后下一帧跟上。
332+
}, 518);// +18 帧为 tween-one 补帧。。。。complete 在时间结束后下一帧跟上。
330333
}, interval);
331334
ticker.timeout(() => {
332335
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
333336
expect(getLeft(children[1])).to.above(99.99);
334337
expect(isNaN(getTop(children[1]))).to.be.ok();
335338
console.log('left_end:', getLeft(children[1]));
336-
}, 517);
339+
}, 518);
337340
}, 18);
338341
});
339342

@@ -373,7 +376,7 @@ describe('rc-queue-anim', () => {
373376
done();
374377
}, 500);
375378
}, 110);
376-
}, 17);
379+
}, 18);
377380
}, 1000);
378381
});
379382
});

0 commit comments

Comments
 (0)