diff --git a/components/_util/openAnimation.js b/components/_util/openAnimation.js index 63c867c92..a047c7d1a 100644 --- a/components/_util/openAnimation.js +++ b/components/_util/openAnimation.js @@ -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 () { @@ -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() }, }) } @@ -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 diff --git a/components/_util/store/connect.jsx b/components/_util/store/connect.jsx index 0bce77360..dd9fe924e 100644 --- a/components/_util/store/connect.jsx +++ b/components/_util/store/connect.jsx @@ -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), } @@ -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 diff --git a/components/collapse/__tests__/__snapshots__/demo.test.js.snap b/components/collapse/__tests__/__snapshots__/demo.test.js.snap index 64c2ddc04..64b49e08f 100644 --- a/components/collapse/__tests__/__snapshots__/demo.test.js.snap +++ b/components/collapse/__tests__/__snapshots__/demo.test.js.snap @@ -32,7 +32,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
This is panel header 1
-
+

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.

@@ -61,7 +61,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
This is panel header 1
-
+

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.

@@ -94,7 +94,7 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
-
+

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.

@@ -148,7 +148,7 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
This is panel header with arrow icon
-
+

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.

diff --git a/components/date-picker/__tests__/MonthPicker.test.js b/components/date-picker/__tests__/MonthPicker.test.js index f0cf2e6c5..09f99c184 100644 --- a/components/date-picker/__tests__/MonthPicker.test.js +++ b/components/date-picker/__tests__/MonthPicker.test.js @@ -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) }) }) diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap index 4097d2c63..2b5cabb61 100644 --- a/components/layout/__tests__/__snapshots__/demo.test.js.snap +++ b/components/layout/__tests__/__snapshots__/demo.test.js.snap @@ -301,7 +301,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `