fix: menu first expand not animation in inline mode

Author: tangjinzhou

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

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

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

@@ -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>
@@ -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>
@@ -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>
@@ -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>

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)
   })
 })

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

@@ -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>
@@ -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>