Skip to content

Commit b3f6ff8

Browse files
afc163afc163
committed
Merge pull request #6 from react-component/clickRogue
update ant-design/issues/588
2 parents 954cff2 + fa1dd85 commit b3f6ff8

File tree

2 files changed

+64
-54
lines changed

2 files changed

+64
-54
lines changed

‎src/QueueAnim.jsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ class QueueAnim extends React.Component {
2525
this.keysToEnter = [];
2626
this.keysToLeave = [];
2727
this.keysAnimating = [];
28+
this.placeholderTimeoutIds = {};
2829

2930
// 第一次进入，默认进场
3031
const children = toArrayChildren(getChildrenFromProps(this.props));
@@ -112,6 +113,9 @@ class QueueAnim extends React.Component {
112113
velocity(findDOMNode(this.refs[child.key]), 'stop');
113114
}
114115
});
116+
Object.keys(this.placeholderTimeoutIds).forEach(key => {
117+
clearTimeout(this.placeholderTimeoutIds[key]);
118+
});
115119
}
116120
}
117121

@@ -148,19 +152,12 @@ class QueueAnim extends React.Component {
148152
}
149153

150154
performEnter(key, i) {
151-
const placeholderNode = findDOMNode(this.refs[placeholderKeyPrefix + key]);
152-
if (!placeholderNode) {
153-
return;
154-
}
155155
const interval = transformArguments(this.props.interval, key, i)[0];
156156
const delay = transformArguments(this.props.delay, key, i)[0];
157-
placeholderNode.style.visibility = 'hidden';
158-
velocity(placeholderNode, 'stop');
159-
velocity(placeholderNode, {opacity: [0, 0]}, {
160-
delay: interval * i + delay,
161-
duration: 0,
162-
begin: this.performEnterBegin.bind(this, key, i),
163-
});
157+
this.placeholderTimeoutIds[key] = setTimeout(
158+
this.performEnterBegin.bind(this, key, i),
159+
interval * i + delay
160+
);
164161
if (this.keysToEnter.indexOf(key) >= 0) {
165162
this.keysToEnter.splice(this.keysToEnter.indexOf(key), 1);
166163
}
@@ -190,6 +187,8 @@ class QueueAnim extends React.Component {
190187
}
191188

192189
performLeave(key, i) {
190+
clearTimeout(this.placeholderTimeoutIds[key]);
191+
delete this.placeholderTimeoutIds[key];
193192
const node = findDOMNode(this.refs[key]);
194193
if (!node) {
195194
return;
@@ -239,7 +238,8 @@ class QueueAnim extends React.Component {
239238
if (this.keysToLeave.indexOf(key) >= 0) {
240239
this.keysToLeave.splice(this.keysToLeave.indexOf(key), 1);
241240
}
242-
if (this.keysToLeave.length === 0) {
241+
const needLeave = this.keysToLeave.some(c => childrenShow[c]);
242+
if (!needLeave) {
243243
const currentChildren = toArrayChildren(getChildrenFromProps(this.props));
244244
this.setState({
245245
children: currentChildren,

‎tests/index.spec.js

Lines changed: 52 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@ describe('rc-queue-anim', function () {
2626
function shouldAnimatingThisOne(instance, index) {
2727
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
2828
children.forEach(function(node, i) {
29-
console.log(i, node.style.visibility, getOpacity(node));
29+
console.log(i, getOpacity(node));
3030
if (i === 0) {
3131
return;
3232
}
3333
if (i <= index) {
34-
expect(node.style.visibility).to.be('visible');
3534
expect(getOpacity(node)).to.above(0);
3635
} else {
37-
expect(node.style.visibility).to.be('hidden');
36+
// placeholder
37+
expect(node.innerHTML).to.be('');
3838
}
3939
});
4040
}
@@ -191,34 +191,39 @@ describe('rc-queue-anim', function () {
191191
left: [100, 0]
192192
}
193193
});
194-
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
195-
expect(isNaN(getLeft(children[1]))).to.be.ok();
196194
setTimeout(function() {
197-
expect(getLeft(children[1])).to.above(0);
198-
done();
199-
}, 10);
195+
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
196+
expect(isNaN(getLeft(children[1]))).to.be.ok();
197+
setTimeout(function() {
198+
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
199+
expect(getLeft(children[1])).to.above(0);
200+
done();
201+
}, 10);
202+
}, 0);
200203
});
201204

202205
it('should support animation when change direction at animating', function(done) {
203206
instance = createQueueAnimInstance({
204207
leaveReverse: true
205208
});
206-
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
207209
let index = 0;
208210
let maxOpacity;
209211
let opacityArray = [];
210212
let interval = setInterval(function() {
211213
index += 1;
212-
let opacity = getOpacity(children[1]);
213-
opacityArray.push(opacity);
214+
let opacity = getOpacity(TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div')[1]);
215+
if (!isNaN(opacity)) {
216+
opacityArray.push(opacity);
217+
}
214218
console.log('time: ', index * 30, 'opacity: ', opacity);
215219
if (index === 10) {
216220
instance.toggle();
217221
maxOpacity = opacity;
218222
console.log('toggle');
219223
}
220-
if (opacity >= 1 || opacity <= 0) {
224+
if (opacity >= 1 || opacity <= 0 || isNaN(opacity)) {
221225
clearInterval(interval);
226+
console.log(maxOpacity);
222227
opacityArray.forEach(function(o) {
223228
expect(maxOpacity >= o).to.be.ok();
224229
});
@@ -230,17 +235,20 @@ describe('rc-queue-anim', function () {
230235
it('should has animating className', function(done) {
231236
const interval = defaultInterval;
232237
instance = createQueueAnimInstance();
233-
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
234-
expect(children[1].className).to.contain('queue-anim-entering');
235238
setTimeout(function() {
236-
expect(children[1].className).not.to.contain('queue-anim-entering');
237-
let removeIndex = instance.removeOne();
238-
expect(children[removeIndex + 1].className).to.contain('queue-anim-leaving');
239+
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
240+
expect(children[1].className).to.contain('queue-anim-entering');
239241
setTimeout(function() {
240-
expect(children[removeIndex + 1].className).not.to.contain('queue-anim-leaving');
241-
done();
242+
expect(children[1].className).not.to.contain('queue-anim-entering');
243+
let removeIndex = instance.removeOne();
244+
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
245+
expect(children[removeIndex + 1].className).to.contain('queue-anim-leaving');
246+
setTimeout(function() {
247+
expect(children[removeIndex + 1].className).not.to.contain('queue-anim-leaving');
248+
done();
249+
}, 550);
242250
}, 550);
243-
}, 550);
251+
}, 5);
244252
});
245253

246254
it('should has animating config is func enter', function (done) {
@@ -253,34 +261,36 @@ describe('rc-queue-anim', function () {
253261
return {left: [100, 0]};
254262
}
255263
});
256-
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
257-
expect(isNaN(getLeft(children[1]))).to.be.ok();
258-
expect(isNaN(getTop(children[2]))).to.be.ok();
259-
setTimeout(function () {
260-
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
261-
expect(getLeft(children[1])).to.above(0);
262-
expect(isNaN(getTop(children[1]))).to.be.ok();
263-
console.log('left:', getLeft(children[1]));
264+
setTimeout(function() {
265+
let children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
266+
expect(isNaN(getLeft(children[1]))).to.be.ok();
267+
expect(isNaN(getTop(children[2]))).to.be.ok();
264268
setTimeout(function () {
265269
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
266-
expect(getTop(children[2])).to.above(0);
267-
expect(isNaN(getLeft(children[2]))).to.be.ok();
268-
console.log('top:', getTop(children[2]));
270+
expect(getLeft(children[1])).to.above(0);
271+
expect(isNaN(getTop(children[1]))).to.be.ok();
272+
console.log('left:', getLeft(children[1]));
269273
setTimeout(function () {
270274
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
271-
expect(getTop(children[2])).to.be(100);
275+
expect(getTop(children[2])).to.above(0);
272276
expect(isNaN(getLeft(children[2]))).to.be.ok();
273-
console.log('top_end:', getTop(children[2]));
274-
done();
277+
console.log('top:', getTop(children[2]));
278+
setTimeout(function () {
279+
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
280+
expect(getTop(children[2])).to.be(100);
281+
expect(isNaN(getLeft(children[2]))).to.be.ok();
282+
console.log('top_end:', getTop(children[2]));
283+
done();
284+
}, 500);
285+
}, interval);
286+
setTimeout(function () {
287+
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
288+
expect(getLeft(children[1])).to.be(100);
289+
expect(isNaN(getTop(children[1]))).to.be.ok();
290+
console.log('left_end:', getLeft(children[1]));
275291
}, 500);
276-
}, interval);
277-
setTimeout(function () {
278-
children = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'div');
279-
expect(getLeft(children[1])).to.be(100);
280-
expect(isNaN(getTop(children[1]))).to.be.ok();
281-
console.log('left_end:', getLeft(children[1]));
282-
}, 500);
283-
}, 10);
292+
}, 10);
293+
}, 0);
284294
});
285295

286296
it('should has animating config is func leave', function (done) {

0 commit comments

Comments
 (0)