Skip to content

Commit d63935e

Browse files
tangjinzhoutangjinzhou
committed
fix: menu first expand not animation in inline mode
1 parent aa1b246 commit d63935e

File tree

9 files changed

+60
-41
lines changed

9 files changed

+60
-41
lines changed

‎components/_util/openAnimation.js

+26-6
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,32 @@
11
import cssAnimation from './css-animation'
22
import raf from 'raf'
33

4-
function animate (node, show, done) {
4+
function animate (node, show, done, type) {
55
let height
66
let requestAnimationFrameId
7+
let appearRequestAnimationFrameId
78
return cssAnimation(node, 'ant-motion-collapse', {
89
start () {
10+
if (appearRequestAnimationFrameId) {
11+
raf.cancel(appearRequestAnimationFrameId)
12+
}
913
if (!show) {
1014
node.style.height = `${node.offsetHeight}px`
11-
node.style.opacity = 1
15+
node.style.opacity = '1'
1216
} else {
1317
height = node.offsetHeight
14-
node.style.height = 0
15-
node.style.opacity = 0
18+
// not get offsetHeight when appear
19+
// set it into raf get correct offsetHeight
20+
if (type === 'appear' && height === 0) {
21+
appearRequestAnimationFrameId = raf(() => {
22+
height = node.offsetHeight
23+
node.style.height = '0px'
24+
node.style.opacity = '0'
25+
})
26+
} else {
27+
node.style.height = '0px'
28+
node.style.opacity = '0'
29+
}
1630
}
1731
},
1832
active () {
@@ -21,16 +35,19 @@ function animate (node, show, done) {
2135
}
2236
requestAnimationFrameId = raf(() => {
2337
node.style.height = `${show ? height : 0}px`
24-
node.style.opacity = show ? 1 : 0
38+
node.style.opacity = show ? '1' : '0'
2539
})
2640
},
2741
end () {
42+
if (appearRequestAnimationFrameId) {
43+
raf.cancel(appearRequestAnimationFrameId)
44+
}
2845
if (requestAnimationFrameId) {
2946
raf.cancel(requestAnimationFrameId)
3047
}
3148
node.style.height = ''
3249
node.style.opacity = ''
33-
done()
50+
done && done()
3451
},
3552
})
3653
}
@@ -42,6 +59,9 @@ const animation = {
4259
leave (node, done) {
4360
return animate(node, false, done)
4461
},
62+
appear (node, done) {
63+
return animate(node, true, done, 'appear')
64+
},
4565
}
4666

4767
export default animation

‎components/_util/store/connect.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default function connect (mapStateToProps) {
2626
},
2727
data () {
2828
this.store = this.storeContext.store
29-
this.preProps = { ...omit(getOptionProps(this), ['__propsSymbol__']) }
29+
this.preProps = omit(getOptionProps(this), ['__propsSymbol__'])
3030
return {
3131
subscribed: finnalMapStateToProps(this.store.getState(), this.$props),
3232
}
@@ -50,7 +50,7 @@ export default function connect (mapStateToProps) {
5050
if (!this.unsubscribe) {
5151
return
5252
}
53-
const props = getOptionProps(this)
53+
const props = omit(getOptionProps(this), ['__propsSymbol__'])
5454
const nextSubscribed = finnalMapStateToProps(this.store.getState(), props)
5555
if (!shallowEqual(this.preProps, props) || !shallowEqual(this.subscribed, nextSubscribed)) {
5656
this.subscribed = nextSubscribed

‎components/collapse/__tests__/__snapshots__/demo.test.js.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
3232
<div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
3333
<path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
3434
</svg></i>This is panel header 1</div>
35-
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
35+
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse">
3636
<div class="ant-collapse-content-box">
3737
<p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
3838
</div>
@@ -61,7 +61,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
6161
<div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
6262
<path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
6363
</svg></i>This is panel header 1</div>
64-
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
64+
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse">
6565
<div class="ant-collapse-content-box">
6666
<p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
6767
</div>
@@ -94,7 +94,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
9494
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
9595
<path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path>
9696
</svg></i></div>
97-
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
97+
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse">
9898
<div class="ant-collapse-content-box">
9999
<p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
100100
</div>
@@ -148,7 +148,7 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
148148
<div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
149149
<path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
150150
</svg></i>This is panel header with arrow icon</div>
151-
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
151+
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse">
152152
<div class="ant-collapse-content-box">
153153
<p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
154154
</div>

‎components/date-picker/__tests__/MonthPicker.test.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ describe('MonthPicker', () => {
1717
})
1818
await asyncExpect(() => {
1919
openPanel(wrapper)
20-
})
20+
}, 0)
2121
await asyncExpect(() => {
2222
$$('.ant-calendar-month-panel-month')[0].click()
2323
$$('.ant-calendar-month-panel-cell')[6].getAttribute('class').split(' ').includes('ant-calendar-month-panel-selected-cell')
24-
}, 0)
24+
}, 1000)
2525
})
2626
})

‎components/layout/__tests__/__snapshots__/demo.test.js.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
301301
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%;">
302302
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
303303
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i>subnav 1</span><i class="ant-menu-submenu-arrow"></i></div>
304-
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
304+
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub ant-motion-collapse">
305305
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 48px;">option1</li>
306306
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option2</li>
307307
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option3</li>
@@ -358,7 +358,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
358358
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%; border-right: 0;">
359359
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
360360
<div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" class="ant-menu-submenu-title" style="padding-left: 24px;"><span><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i>subnav 1</span><i class="ant-menu-submenu-arrow"></i></div>
361-
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
361+
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub ant-motion-collapse">
362362
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 48px;">option1</li>
363363
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option2</li>
364364
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option3</li>

0 commit comments

Comments
 (0)