Skip to content

Commit 856137b

Browse files
zombieJzombieJ
authored
reafctor: Use CSSMotion (#290)
* add CSSMotion * support slide up * not remove on hidden * clean up * re-comment code * update demo * support collapse motion * rm legacy code * leave animation * fix test
1 parent 58aab1a commit 856137b

File tree

12 files changed

+231
-165
lines changed

12 files changed

+231
-165
lines changed

‎assets/index.less‎

Lines changed: 39 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,14 @@
33
@font-face {
44
font-family: 'FontAwesome';
55
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.eot');
6-
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.woff') format('woff'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf') format('truetype'), url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?#fontawesomeregular') format('svg');
6+
src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?#iefix')
7+
format('embedded-opentype'),
8+
url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.woff')
9+
format('woff'),
10+
url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf')
11+
format('truetype'),
12+
url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?#fontawesomeregular')
13+
format('svg');
714
font-weight: normal;
815
font-style: normal;
916
}
@@ -24,9 +31,9 @@
2431

2532
&-collapse {
2633
overflow: hidden;
27-
&-active {
28-
transition: height .3s ease-out;
29-
}
34+
// &-active {
35+
transition: height 0.3s ease-out;
36+
// }
3037
}
3138

3239
&-item-group-list {
@@ -68,15 +75,17 @@
6875
margin-top: 0;
6976
}
7077

71-
&-item, &-submenu-title {
78+
&-item,
79+
&-submenu-title {
7280
margin: 0;
7381
position: relative;
7482
display: block;
7583
padding: 7px 7px 7px 16px;
7684
white-space: nowrap;
7785

7886
// Disabled state sets text to gray and nukes hover/tab effects
79-
&.@{menuPrefixCls}-item-disabled, &.@{menuPrefixCls}-submenu-disabled {
87+
&.@{menuPrefixCls}-item-disabled,
88+
&.@{menuPrefixCls}-submenu-disabled {
8089
color: #777 !important;
8190
}
8291
}
@@ -102,7 +111,8 @@
102111
}
103112
}
104113

105-
.@{menuPrefixCls}-submenu-title, .@{menuPrefixCls}-item {
114+
.@{menuPrefixCls}-submenu-title,
115+
.@{menuPrefixCls}-item {
106116
.anticon {
107117
width: 14px;
108118
height: 14px;
@@ -112,31 +122,33 @@
112122
}
113123

114124
&-horizontal {
115-
background-color: #F3F5F7;
125+
background-color: #f3f5f7;
116126
border: none;
117127
border-bottom: 1px solid #d9d9d9;
118128
box-shadow: none;
119129
white-space: nowrap;
120130
overflow: hidden;
121131

122-
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
132+
& > .@{menuPrefixCls}-item,
133+
& > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
123134
padding: 15px 20px;
124135
}
125136

126-
& > .@{menuPrefixCls}-submenu, & > .@{menuPrefixCls}-item {
137+
& > .@{menuPrefixCls}-submenu,
138+
& > .@{menuPrefixCls}-item {
127139
border-bottom: 2px solid transparent;
128140
display: inline-block;
129141
vertical-align: bottom;
130142

131143
&-active {
132144
border-bottom: 2px solid #2db7f5;
133-
background-color: #F3F5F7;
145+
background-color: #f3f5f7;
134146
color: #2baee9;
135147
}
136148
}
137149

138150
&:after {
139-
content: "\20";
151+
content: '\20';
140152
display: block;
141153
height: 0;
142154
clear: both;
@@ -148,7 +160,8 @@
148160
&-vertical-right,
149161
&-inline {
150162
padding: 12px 0;
151-
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
163+
& > .@{menuPrefixCls}-item,
164+
& > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
152165
padding: 12px 8px 12px 24px;
153166
}
154167
.@{menuPrefixCls}-submenu-arrow {
@@ -163,14 +176,14 @@
163176
right: 16px;
164177
line-height: 1.5em;
165178
&:before {
166-
content: "\f0da";
179+
content: '\f0da';
167180
}
168181
}
169182
}
170183
&-inline {
171184
.@{menuPrefixCls}-submenu-arrow {
172185
transform: rotate(90deg);
173-
transition: transform .3s;
186+
transition: transform 0.3s;
174187
}
175188
& .@{menuPrefixCls}-submenu-open > .@{menuPrefixCls}-submenu-title {
176189
.@{menuPrefixCls}-submenu-arrow {
@@ -191,22 +204,23 @@
191204
border-radius: 0;
192205
box-shadow: none;
193206

194-
& > .@{menuPrefixCls}-item, & > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
207+
& > .@{menuPrefixCls}-item,
208+
& > .@{menuPrefixCls}-submenu > .@{menuPrefixCls}-submenu-title {
195209
padding-top: 8px;
196210
padding-bottom: 8px;
197211
padding-right: 0;
198212
}
199213
}
200214

201215
.effect() {
202-
animation-duration: .3s;
216+
animation-duration: 0.3s;
203217
animation-fill-mode: both;
204218
transform-origin: 0 0;
205219
}
206220

207221
&-open {
208-
209-
&-slide-up-enter, &-slide-up-appear {
222+
&-slide-up-enter,
223+
&-slide-up-appear {
210224
.effect();
211225
opacity: 0;
212226
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
@@ -220,7 +234,8 @@
220234
animation-play-state: paused;
221235
}
222236

223-
&-slide-up-enter&-slide-up-enter-active, &-slide-up-appear&-slide-up-appear-active {
237+
&-slide-up-enter&-slide-up-enter-active,
238+
&-slide-up-appear&-slide-up-appear-active {
224239
animation-name: rcMenuOpenSlideUpIn;
225240
animation-play-state: running;
226241
}
@@ -255,7 +270,8 @@
255270
}
256271
}
257272

258-
&-zoom-enter, &-zoom-appear {
273+
&-zoom-enter,
274+
&-zoom-appear {
259275
opacity: 0;
260276
.effect();
261277
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
@@ -268,7 +284,8 @@
268284
animation-play-state: paused;
269285
}
270286

271-
&-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active {
287+
&-zoom-enter&-zoom-enter-active,
288+
&-zoom-appear&-zoom-appear-active {
272289
animation-name: rcMenuOpenZoomIn;
273290
animation-play-state: running;
274291
}
@@ -290,7 +307,6 @@
290307
}
291308
@keyframes rcMenuOpenZoomOut {
292309
0% {
293-
294310
transform: scale(1, 1);
295311
}
296312
100% {
@@ -299,6 +315,4 @@
299315
}
300316
}
301317
}
302-
303318
}
304-

‎examples/antd.js‎

Lines changed: 14 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/* eslint-disable no-console, react/require-default-props, no-param-reassign */
22

33
import React from 'react';
4-
import animate from 'css-animation';
54
import PropTypes from 'prop-types';
65
import Menu, { SubMenu, Item as MenuItem, Divider } from '../src';
76
import '../assets/index.less';
@@ -11,42 +10,17 @@ function handleClick(info) {
1110
console.log(info);
1211
}
1312

14-
const animation = {
15-
enter(node, done) {
16-
let height;
17-
return animate(node, 'rc-menu-collapse', {
18-
start() {
19-
height = node.offsetHeight;
20-
node.style.height = 0;
21-
},
22-
active() {
23-
node.style.height = `${height}px`;
24-
},
25-
end() {
26-
node.style.height = '';
27-
done();
28-
},
29-
});
30-
},
31-
32-
appear(...args) {
33-
return this.enter(...args);
34-
},
35-
36-
leave(node, done) {
37-
return animate(node, 'rc-menu-collapse', {
38-
start() {
39-
node.style.height = `${node.offsetHeight}px`;
40-
},
41-
active() {
42-
node.style.height = 0;
43-
},
44-
end() {
45-
node.style.height = '';
46-
done();
47-
},
48-
});
49-
},
13+
const collapseNode = () => ({ height: 0 });
14+
const expandNode = node => ({ height: node.scrollHeight });
15+
16+
const inlineMotion = {
17+
motionName: 'rc-menu-collapse',
18+
onAppearStart: collapseNode,
19+
onAppearActive: expandNode,
20+
onEnterStart: collapseNode,
21+
onEnterActive: expandNode,
22+
onLeaveStart: expandNode,
23+
onLeaveActive: collapseNode,
5024
};
5125

5226
const nestSubMenu = (
@@ -165,6 +139,7 @@ class CommonMenu extends React.Component {
165139
openAnimation={this.props.openAnimation}
166140
defaultOpenKeys={this.props.defaultOpenKeys}
167141
overflowedIndicator={overflowedIndicator}
142+
motion={this.props.motion}
168143
>
169144
{children}
170145
</Menu>
@@ -176,6 +151,7 @@ class CommonMenu extends React.Component {
176151
CommonMenu.propTypes = {
177152
mode: PropTypes.string,
178153
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
154+
motion: PropTypes.object,
179155
triggerSubMenuAction: PropTypes.string,
180156
defaultOpenKeys: PropTypes.arrayOf(PropTypes.string),
181157
updateChildrenAndOverflowedIndicator: PropTypes.bool,
@@ -203,11 +179,7 @@ function Demo() {
203179
const verticalMenu = <CommonMenu mode="vertical" openAnimation="zoom" />;
204180

205181
const inlineMenu = (
206-
<CommonMenu
207-
mode="inline"
208-
defaultOpenKeys={['1']}
209-
openAnimation={animation}
210-
/>
182+
<CommonMenu mode="inline" defaultOpenKeys={['1']} motion={inlineMotion} />
211183
);
212184

213185
return (

‎examples/custom-icon.js‎

Lines changed: 11 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/* eslint-disable no-console, no-param-reassign */
22
import * as React from 'react';
3-
import animate from 'css-animation';
43
import Menu, { SubMenu, Item as MenuItem, Divider } from '../src';
54
import '../assets/index.less';
65

@@ -45,42 +44,17 @@ function expandIcon(props) {
4544
});
4645
}
4746

48-
const animation = {
49-
enter(node, done) {
50-
let height;
51-
return animate(node, 'rc-menu-collapse', {
52-
start() {
53-
height = node.offsetHeight;
54-
node.style.height = 0;
55-
},
56-
active() {
57-
node.style.height = `${height}px`;
58-
},
59-
end() {
60-
node.style.height = '';
61-
done();
62-
},
63-
});
64-
},
65-
66-
appear(...args) {
67-
return this.enter(...args);
68-
},
47+
const collapseNode = () => ({ height: 0 });
48+
const expandNode = node => ({ height: node.scrollHeight });
6949

70-
leave(node, done) {
71-
return animate(node, 'rc-menu-collapse', {
72-
start() {
73-
node.style.height = `${node.offsetHeight}px`;
74-
},
75-
active() {
76-
node.style.height = 0;
77-
},
78-
end() {
79-
node.style.height = '';
80-
done();
81-
},
82-
});
83-
},
50+
const inlineMotion = {
51+
motionName: 'rc-menu-collapse',
52+
onAppearStart: collapseNode,
53+
onAppearActive: expandNode,
54+
onEnterStart: collapseNode,
55+
onEnterActive: expandNode,
56+
onLeaveStart: expandNode,
57+
onLeaveActive: collapseNode,
8458
};
8559

8660
class Demo extends React.Component {
@@ -149,7 +123,7 @@ class Demo extends React.Component {
149123
const inlineMenu = this.renderCommonMenu({
150124
mode: 'inline',
151125
defaultOpenKeys: ['1'],
152-
openAnimation: animation,
126+
motion: inlineMotion,
153127
itemIcon,
154128
expandIcon,
155129
});

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,11 @@
4949
"dom-scroll-into-view": "1.x",
5050
"mini-store": "^2.0.0",
5151
"mutationobserver-shim": "^0.3.2",
52-
"rc-animate": "2.x",
52+
"rc-animate": "^2.10.1",
5353
"rc-trigger": "^2.3.0",
5454
"rc-util": "^4.13.0",
55-
"resize-observer-polyfill": "^1.5.0"
55+
"resize-observer-polyfill": "^1.5.0",
56+
"shallowequal": "^1.1.0"
5657
},
5758
"devDependencies": {
5859
"@types/jest": "^24.0.18",

‎src/DOMWrap.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ interface DOMWrapProps {
2929
theme?: string;
3030
overflowedIndicator?: React.ReactNode;
3131
visible?: boolean;
32-
hiddenClassName?: string;
3332
tag?: string;
3433
style?: React.CSSProperties;
3534
}
@@ -350,7 +349,6 @@ class DOMWrap extends React.Component<DOMWrapProps, DOMWrapState> {
350349

351350
render() {
352351
const {
353-
hiddenClassName,
354352
visible,
355353
prefixCls,
356354
overflowedIndicator,
@@ -362,10 +360,6 @@ class DOMWrap extends React.Component<DOMWrapProps, DOMWrapState> {
362360
...rest
363361
} = this.props;
364362

365-
if (!visible) {
366-
rest.className += ` ${hiddenClassName}`;
367-
}
368-
369363
const Tag = tag as any;
370364

371365
return <Tag {...rest}>{this.renderChildren(children)}</Tag>;

0 commit comments

Comments
 (0)