Improve Menu[inline] and Collapse animation, ref #4898

components/_util/openAnimation.tsx

@@ -1,4 +1,5 @@
 import cssAnimation from 'css-animation';
+import getRequestAnimationFrame from './getRequestAnimationFrame';
 
 function animate(node, show, done) {
   let height;
@@ -6,16 +7,22 @@ function animate(node, show, done) {
     start() {
       if (!show) {
         node.style.height = `${node.offsetHeight}px`;
+        node.style.opacity = 1;
       } else {
         height = node.offsetHeight;
         node.style.height = 0;
+        node.style.opacity = 0;
       }
     },
     active() {
-      node.style.height = `${show ? height : 0}px`;
+      getRequestAnimationFrame()(() => {
+        node.style.height = `${show ? height : 0}px`;
+        node.style.opacity = show ? 1 : 0;
+      });
     },
     end() {
       node.style.height = '';
+      node.style.opacity = '';
       done();
     },
   });

components/collapse/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import RcCollapse from 'rc-collapse';
 import classNames from 'classnames';
+import animation from '../_util/openAnimation';
 
 export interface CollapseProps {
   activeKey?: Array<string> | string;
@@ -30,6 +31,7 @@ export default class Collapse extends React.Component<CollapseProps, any> {
   static defaultProps = {
     prefixCls: 'ant-collapse',
     bordered: true,
+    openAnimation: { ...animation, appear() {} },
   };
 
   render() {

components/style/core/motion.less

@@ -10,6 +10,6 @@
 .ant-motion-collapse {
   overflow: hidden;
   &-active {
-    transition: height .24s ease-in;
+    transition: height .2s, opacity .2s;
   }
 }