leave animation

Author: zombieJ

examples/custom-icon.js

@@ -1,6 +1,5 @@
 /* eslint-disable no-console, no-param-reassign */
 import * as React from 'react';
-import animate from 'css-animation';
 import Menu, { SubMenu, Item as MenuItem, Divider } from '../src';
 import '../assets/index.less';
 
@@ -45,42 +44,17 @@ function expandIcon(props) {
   });
 }
 
-const animation = {
-  enter(node, done) {
-    let height;
-    return animate(node, 'rc-menu-collapse', {
-      start() {
-        height = node.offsetHeight;
-        node.style.height = 0;
-      },
-      active() {
-        node.style.height = `${height}px`;
-      },
-      end() {
-        node.style.height = '';
-        done();
-      },
-    });
-  },
-
-  appear(...args) {
-    return this.enter(...args);
-  },
+const collapseNode = () => ({ height: 0 });
+const expandNode = node => ({ height: node.scrollHeight });
 
-  leave(node, done) {
-    return animate(node, 'rc-menu-collapse', {
-      start() {
-        node.style.height = `${node.offsetHeight}px`;
-      },
-      active() {
-        node.style.height = 0;
-      },
-      end() {
-        node.style.height = '';
-        done();
-      },
-    });
-  },
+const inlineMotion = {
+  motionName: 'rc-menu-collapse',
+  onAppearStart: collapseNode,
+  onAppearActive: expandNode,
+  onEnterStart: collapseNode,
+  onEnterActive: expandNode,
+  onLeaveStart: expandNode,
+  onLeaveActive: collapseNode,
 };
 
 class Demo extends React.Component {
@@ -149,7 +123,7 @@ class Demo extends React.Component {
     const inlineMenu = this.renderCommonMenu({
       mode: 'inline',
       defaultOpenKeys: ['1'],
-      openAnimation: animation,
+      motion: inlineMotion,
       itemIcon,
       expandIcon,
     });

package.json

@@ -52,7 +52,8 @@
     "rc-animate": "^2.10.1",
     "rc-trigger": "^2.3.0",
     "rc-util": "^4.13.0",
-    "resize-observer-polyfill": "^1.5.0"
+    "resize-observer-polyfill": "^1.5.0",
+    "shallowequal": "^1.1.0"
   },
   "devDependencies": {
     "@types/jest": "^24.0.18",

src/SubMenu.tsx

@@ -102,9 +102,6 @@ export interface SubMenuProps {
   className?: string;
   popupClassName?: string;
 
-  // [Legacy]
-  // openTransitionName?: string;
-  // openAnimation?: OpenAnimation;
   motion?: MotionType;
 }
 

src/SubPopupMenu.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'mini-store';
 import KeyCode from 'rc-util/lib/KeyCode';
 import createChainedFunction from 'rc-util/lib/createChainedFunction';
+import shallowEqual from 'shallowequal';
 import classNames from 'classnames';
 import {
   getKeyFromChildrenIndex,
@@ -15,7 +16,6 @@ import {
   SelectEventHandler,
   OpenEventHandler,
   DestroyEventHandler,
-  OpenAnimation,
   MiniStore,
   MenuMode,
   LegacyFunctionRef,
@@ -193,7 +193,8 @@ export class SubPopupMenu extends React.Component<SubPopupMenuProps> {
     return (
       this.props.visible ||
       nextProps.visible ||
-      this.props.className !== nextProps.className
+      this.props.className !== nextProps.className ||
+      !shallowEqual(this.props.style, nextProps.style)
     );
   }