Skip to content

Commit

Permalink
fix: menu first expand not animation in inline mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@tangjinzhou
tangjinzhou committed Dec 19, 2018
1 parent aa1b246 commit d63935e
Show file tree
Hide file tree
Showing 9 changed files with 60 additions and 41 deletions.
32 changes: 26 additions & 6 deletions components/_util/openAnimation.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,32 @@
import cssAnimation from './css-animation'
import raf from 'raf'

function animate (node, show, done) {
function animate (node, show, done, type) {
let height
let requestAnimationFrameId
let appearRequestAnimationFrameId
return cssAnimation(node, 'ant-motion-collapse', {
start () {
if (appearRequestAnimationFrameId) {
raf.cancel(appearRequestAnimationFrameId)
}
if (!show) {
node.style.height = `${node.offsetHeight}px`
node.style.opacity = 1
node.style.opacity = '1'
} else {
height = node.offsetHeight
node.style.height = 0
node.style.opacity = 0
// not get offsetHeight when appear
// set it into raf get correct offsetHeight
if (type === 'appear' && height === 0) {
appearRequestAnimationFrameId = raf(() => {
height = node.offsetHeight
node.style.height = '0px'
node.style.opacity = '0'
})
} else {
node.style.height = '0px'
node.style.opacity = '0'
}
}
},
active () {
Expand All @@ -21,16 +35,19 @@ function animate (node, show, done) {
}
requestAnimationFrameId = raf(() => {
node.style.height = `${show ? height : 0}px`
node.style.opacity = show ? 1 : 0
node.style.opacity = show ? '1' : '0'
})
},
end () {
if (appearRequestAnimationFrameId) {
raf.cancel(appearRequestAnimationFrameId)
}
if (requestAnimationFrameId) {
raf.cancel(requestAnimationFrameId)
}
node.style.height = ''
node.style.opacity = ''
done()
done && done()
},
})
}
Expand All @@ -42,6 +59,9 @@ const animation = {
leave (node, done) {
return animate(node, false, done)
},
appear (node, done) {
return animate(node, true, done, 'appear')
},
}

export default animation
4 changes: 2 additions & 2 deletions components/_util/store/connect.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function connect (mapStateToProps) {
},
data () {
this.store = this.storeContext.store
this.preProps = { ...omit(getOptionProps(this), ['__propsSymbol__']) }
this.preProps = omit(getOptionProps(this), ['__propsSymbol__'])
return {
subscribed: finnalMapStateToProps(this.store.getState(), this.$props),
}
Expand All @@ -50,7 +50,7 @@ export default function connect (mapStateToProps) {
if (!this.unsubscribe) {
return
}
const props = getOptionProps(this)
const props = omit(getOptionProps(this), ['__propsSymbol__'])
const nextSubscribed = finnalMapStateToProps(this.store.getState(), props)
if (!shallowEqual(this.preProps, props) || !shallowEqual(this.subscribed, nextSubscribed)) {
this.subscribed = nextSubscribed
Expand Down
8 changes: 4 additions & 4 deletions components/collapse/__tests__/__snapshots__/demo.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
<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="">
<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>
</svg></i>This is panel header 1</div>
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse">
<div class="ant-collapse-content-box">
<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>
</div>
Expand Down Expand Up @@ -61,7 +61,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
<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="">
<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>
</svg></i>This is panel header 1</div>
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse">
<div class="ant-collapse-content-box">
<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>
</div>
Expand Down Expand Up @@ -94,7 +94,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
<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>
<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>
</svg></i></div>
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse">
<div class="ant-collapse-content-box">
<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>
</div>
Expand Down Expand Up @@ -148,7 +148,7 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
<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="">
<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>
</svg></i>This is panel header with arrow icon</div>
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
<div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse">
<div class="ant-collapse-content-box">
<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>
</div>
Expand Down
4 changes: 2 additions & 2 deletions components/date-picker/__tests__/MonthPicker.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ describe('MonthPicker', () => {
})
await asyncExpect(() => {
openPanel(wrapper)
})
}, 0)
await asyncExpect(() => {
$$('.ant-calendar-month-panel-month')[0].click()
$$('.ant-calendar-month-panel-cell')[6].getAttribute('class').split(' ').includes('ant-calendar-month-panel-selected-cell')
}, 0)
}, 1000)
})
})
4 changes: 2 additions & 2 deletions components/layout/__tests__/__snapshots__/demo.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
<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>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub ant-motion-collapse">
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 48px;">option1</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option2</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option3</li>
Expand Down Expand Up @@ -358,7 +358,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-root ant-menu-light" style="height: 100%; border-right: 0;">
<li role="menuitem" class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected">
<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>
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub">
<ul role="menu" class="ant-menu ant-menu-inline ant-menu-sub ant-motion-collapse">
<li role="menuitem" class="ant-menu-item ant-menu-item-selected" style="padding-left: 48px;">option1</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option2</li>
<li role="menuitem" class="ant-menu-item" style="padding-left: 48px;">option3</li>
Expand Down
Loading

0 comments on commit d63935e

Please sign in to comment.