Skip to content

Commit 19cf7f8

Browse files
afc163afc163
committed
1 parent fcb9907 commit 19cf7f8

File tree

10 files changed

+191
-185
lines changed

10 files changed

+191
-185
lines changed

‎examples/animating-class.js

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,40 +8,42 @@ const App = React.createClass({
88
return {
99
items: [{
1010
children: '依次进入1',
11-
key: 1
11+
key: 1,
1212
}, {
1313
children: '依次进入2',
14-
key: 2
14+
key: 2,
1515
}, {
1616
children: '依次进入3',
17-
key: 3
17+
key: 3,
1818
}, {
1919
children: '依次进入4',
20-
key: 4
20+
key: 4,
2121
}, {
2222
children: '依次进入5',
23-
key: 5
23+
key: 5,
2424
}, {
2525
children: '依次进入6',
26-
key: 6
26+
key: 6,
2727
}],
2828
};
2929
},
3030
removeAll() {
3131
this.setState({
32-
items: []
32+
items: [],
3333
});
3434
},
3535
render() {
36-
return <div>
37-
<QueueAnim>
38-
{this.state.items.map((item) => <div key={item.key}>
39-
{item.children}
40-
</div>)}
41-
</QueueAnim>
42-
<button onClick={this.removeAll}>移出所有</button>
43-
</div>;
44-
}
36+
return (
37+
<div>
38+
<QueueAnim>
39+
{this.state.items.map((item) => <div key={item.key}>
40+
{item.children}
41+
</div>)}
42+
</QueueAnim>
43+
<button onClick={this.removeAll}>移出所有</button>
44+
</div>
45+
);
46+
},
4547
});
4648

4749
ReactDom.render(<App />, document.getElementById('__react-content'));

‎examples/dialog-style.js

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import 'rc-dialog/assets/index.css';
88
const App = React.createClass({
99
getInitialState() {
1010
return {
11-
show: false
11+
show: false,
1212
};
1313
},
1414
onClick() {
@@ -18,37 +18,41 @@ const App = React.createClass({
1818
},
1919
onClose() {
2020
this.setState({
21-
show: false
21+
show: false,
2222
});
2323
},
2424
render() {
2525
let dialog;
2626
if (this.state.show) {
27-
dialog = <Dialog visible={this.state.show}
28-
animation="zoom"
29-
maskAnimation="fade"
30-
onClose={this.onClose}
31-
style={{width: 600}}
32-
title={<div> 第二个弹框</div>}>
33-
<QueueAnim>
27+
dialog = (
28+
<Dialog visible={this.state.show}
29+
animation="zoom"
30+
maskAnimation="fade"
31+
onClose={this.onClose}
32+
style={{width: 600}}
33+
title={<div> 第二个弹框</div>}>
34+
<QueueAnim>
35+
<div key="1">依次进入</div>
36+
<div key="2">依次进入</div>
37+
<div key="3">依次进入</div>
38+
<div key="4">依次进入</div>
39+
</QueueAnim>
40+
</Dialog>
41+
);
42+
}
43+
return (
44+
<div>
45+
<QueueAnim type={['right', 'left']} interval={[100, 200]} delay={[0, 1000]} duration={[500, 2000]} ease={['easeOutBack', 'easeInOutCirc']} leaveReverse>
3446
<div key="1">依次进入</div>
3547
<div key="2">依次进入</div>
3648
<div key="3">依次进入</div>
3749
<div key="4">依次进入</div>
50+
{dialog}
3851
</QueueAnim>
39-
</Dialog>
40-
}
41-
return <div>
42-
<QueueAnim type={['right', 'left']} interval={[100, 200]} delay={[0, 1000]} duration={[500, 2000]} ease={['easeOutBack', 'easeInOutCirc']} leaveReverse={true}>
43-
<div key="1">依次进入</div>
44-
<div key="2">依次进入</div>
45-
<div key="3">依次进入</div>
46-
<div key="4">依次进入</div>
47-
{dialog}
48-
</QueueAnim>
49-
<button onClick={this.onClick}>弹出框口</button>
50-
</div>;
51-
}
52+
<button onClick={this.onClick}>弹出框口</button>
53+
</div>
54+
);
55+
},
5256
});
5357

5458
ReactDom.render(<App />, document.getElementById('__react-content'));

‎examples/dynamic.js

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,43 +8,43 @@ const App = React.createClass({
88
return {
99
items: [{
1010
children: '依次进入1',
11-
key: 1
11+
key: 1,
1212
}, {
1313
children: '依次进入2',
14-
key: 2
14+
key: 2,
1515
}, {
1616
children: '依次进入3',
17-
key: 3
17+
key: 3,
1818
}, {
1919
children: '依次进入4',
20-
key: 4
21-
}]
20+
key: 4,
21+
}],
2222
};
2323
},
2424
add() {
25-
let items = this.state.items;
25+
const items = this.state.items;
2626
items.push({
2727
children: '新节点',
28-
key: this.index++
28+
key: this.index++,
2929
});
3030
this.setState({ items });
3131
},
3232
addTwo() {
33-
let items = this.state.items;
33+
const items = this.state.items;
3434
items.push({
3535
children: '新节点',
36-
key: this.index++
36+
key: this.index++,
3737
});
3838
items.push({
3939
children: '新节点',
40-
key: this.index++
40+
key: this.index++,
4141
});
4242
this.setState({ items });
4343
},
4444
remove(key, e) {
4545
e.preventDefault();
46-
let items = this.state.items;
47-
let target = items.filter(item => item.key === key);
46+
const items = this.state.items;
47+
const target = items.filter(item => item.key === key);
4848
let index;
4949
if (target && target[0]) {
5050
index = items.indexOf(target[0]);
@@ -56,31 +56,33 @@ const App = React.createClass({
5656
},
5757
removeAll() {
5858
this.setState({
59-
items: []
59+
items: [],
6060
});
6161
},
6262
removeAndAdd() {
63-
let items = this.state.items;
63+
const items = this.state.items;
6464
items.splice(items.length - 1, 1);
6565
items.push({
6666
children: '新节点' + Date.now(),
67-
key: this.index++
67+
key: this.index++,
6868
});
6969
this.setState({ items });
7070
},
7171
render() {
72-
return <div>
73-
<button onClick={this.add}>点击新增</button>
74-
<button onClick={this.addTwo}>点击新增两个</button>
75-
<button onClick={this.removeAll}>移出所有</button>
76-
<button onClick={this.removeAndAdd}>移出与添加</button>
77-
<QueueAnim>
78-
{this.state.items.map((item) => <div key={item.key}>
79-
{item.children} <a href="#" onClick={this.remove.bind(this, item.key)}>删除</a>
80-
</div>)}
81-
</QueueAnim>
82-
</div>;
83-
}
72+
return (
73+
<div>
74+
<button onClick={this.add}>点击新增</button>
75+
<button onClick={this.addTwo}>点击新增两个</button>
76+
<button onClick={this.removeAll}>移出所有</button>
77+
<button onClick={this.removeAndAdd}>移出与添加</button>
78+
<QueueAnim>
79+
{this.state.items.map((item) => <div key={item.key}>
80+
{item.children} <a href="#" onClick={this.remove.bind(this, item.key)}>删除</a>
81+
</div>)}
82+
</QueueAnim>
83+
</div>
84+
);
85+
},
8486
});
8587

8688
ReactDom.render(<App />, document.getElementById('__react-content'));

‎examples/empty-children.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,42 +6,42 @@ const QueueItem = React.createClass({
66
render() {
77
return (
88
<QueueAnim>
9-
<div key='1'>Item</div>
10-
<div key='2'>Item</div>
11-
<div key='3'>Item</div>
9+
<div key="1">Item</div>
10+
<div key="2">Item</div>
11+
<div key="3">Item</div>
1212
</QueueAnim>
1313
);
14-
}
14+
},
1515
});
1616

1717
const Item = React.createClass({
1818
render() {
1919
return (
2020
<div>Item</div>
2121
);
22-
}
22+
},
2323
});
2424

2525
const Page1 = React.createClass({
2626
render() {
2727
return (
2828
<div>
2929
<QueueAnim interval={1500}>
30-
<Item key='1' />
31-
<Item key='2' />
32-
<Item key='3' />
33-
<Item key='4' />
30+
<Item key="1" />
31+
<Item key="2" />
32+
<Item key="3" />
33+
<Item key="4" />
3434
</QueueAnim>
3535
<hr />
3636
<QueueAnim interval={1500}>
37-
<QueueItem key='1'>11</QueueItem>
38-
<QueueItem key='2'>11</QueueItem>
39-
<QueueItem key='3'>11</QueueItem>
40-
<QueueItem key='4'>11</QueueItem>
37+
<QueueItem key="1">11</QueueItem>
38+
<QueueItem key="2">11</QueueItem>
39+
<QueueItem key="3">11</QueueItem>
40+
<QueueItem key="4">11</QueueItem>
4141
</QueueAnim>
4242
</div>
4343
);
44-
}
44+
},
4545
});
4646

4747
ReactDom.render(<Page1 />, document.getElementById('__react-content'));

‎examples/enter-leave.js

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,40 +7,42 @@ const App = React.createClass({
77
return {
88
items: [{
99
children: '依次进入1',
10-
key: 1
10+
key: 1,
1111
}, {
1212
children: '依次进入2',
13-
key: 2
13+
key: 2,
1414
}, {
1515
children: '依次进入3',
16-
key: 3
16+
key: 3,
1717
}, {
1818
children: '依次进入4',
19-
key: 4
19+
key: 4,
2020
}, {
2121
children: '依次进入5',
22-
key: 5
22+
key: 5,
2323
}, {
2424
children: '依次进入6',
25-
key: 6
25+
key: 6,
2626
}],
2727
};
2828
},
2929
removeAll() {
3030
this.setState({
31-
items: []
31+
items: [],
3232
});
3333
},
3434
render() {
35-
return <div>
36-
<QueueAnim type={['right', 'left']} interval={[100, 200]} delay={[0, 1000]} duration={[500, 2000]} ease={['easeOutBack','easeInOutCirc']} leaveReverse={true}>
37-
{this.state.items.map((item) => <div key={item.key}>
38-
{item.children}
39-
</div>)}
40-
</QueueAnim>
41-
<button onClick={this.removeAll}>移出所有</button>
42-
</div>;
43-
}
35+
return (
36+
<div>
37+
<QueueAnim type={['right', 'left']} interval={[100, 200]} delay={[0, 1000]} duration={[500, 2000]} ease={['easeOutBack', 'easeInOutCirc']} leaveReverse>
38+
{this.state.items.map((item) => <div key={item.key}>
39+
{item.children}
40+
</div>)}
41+
</QueueAnim>
42+
<button onClick={this.removeAll}>移出所有</button>
43+
</div>
44+
);
45+
},
4446
});
4547

4648
ReactDom.render(<App />, document.getElementById('__react-content'));

0 commit comments

Comments
 (0)