docs: update demo

Author: zombieJ

assets/index.less

@@ -4,23 +4,27 @@
 @zIndex: 1050;
 
 .@{prefixCls} {
-  // position: fixed;
-  // inset: 0;
-  // z-index: @zIndex;
-  // pointer-events: none;
+  position: fixed;
+  inset: 0;
+  z-index: @zIndex;
+  pointer-events: none;
 
   &-mask {
     position: absolute;
     z-index: @zIndex;
     background: rgba(0, 0, 0, 0.5);
     inset: 0;
-    // pointer-events: auto;
+    pointer-events: auto;
   }
 
   &-panel-wrapper {
     position: absolute;
     z-index: @zIndex;
 
+    &-hidden {
+      display: none;
+    }
+
     // Placement
     .@{prefixCls}-left & {
       top: 0;
@@ -36,10 +40,10 @@
   }
 
   &-panel {
-    background: #fff;
     width: 100%;
     height: 100%;
-    // pointer-events: auto;
+    background: #fff;
+    pointer-events: auto;
   }
 }
 

docs/examples/change-remove.tsx

@@ -1,11 +1,16 @@
-import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+  AppstoreOutlined,
+  MailOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
 import { Menu } from 'antd';
 import * as React from 'react';
 
 import Drawer from 'rc-drawer';
 
 import '../../assets/index.less';
 import './assets/index.less';
+import motionProps from './motion';
 
 const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
@@ -24,7 +29,12 @@ class Demo extends React.Component<any, { show: boolean }> {
     return (
       <div>
         {this.state.show && (
-          <Drawer wrapperClassName="drawer-wrapper" width="20vw">
+          <Drawer
+            wrapperClassName="drawer-wrapper"
+            width="20vw"
+            open
+            {...motionProps}
+          >
             <Menu
               defaultSelectedKeys={['1']}
               defaultOpenKeys={['sub1']}

docs/examples/getContainer.tsx

@@ -1,4 +1,8 @@
-import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+  AppstoreOutlined,
+  MailOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
 import { Menu } from 'antd';
 import * as React from 'react';
 
@@ -26,8 +30,26 @@ class DrawerTester extends React.Component {
   public render() {
     return (
       <div>
-        <div ref={this.saveContainer} id="container" />
-        <Drawer width="20vw" getContainer={this.getContainer}>
+        <div
+          ref={this.saveContainer}
+          id="container"
+          style={{
+            height: 300,
+            background: 'rgba(0,0,0,0.05)',
+            overflow: 'auto',
+          }}
+        >
+          <div
+            style={{
+              display: 'inline-block',
+              height: 1000,
+              boxShadow: `0 0 1px red`,
+            }}
+          >
+            Hello World
+          </div>
+        </div>
+        <Drawer width="20vw" getContainer={this.getContainer} open>
           <Menu
             defaultSelectedKeys={['1']}
             defaultOpenKeys={['sub1']}

src/DrawerPopup.tsx

@@ -88,7 +88,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
 
   // ============================ Mask ============================
   const maskNode: React.ReactNode = mask && (
-    <CSSMotion {...maskMotion} visible={open}>
+    <CSSMotion key="mask" {...maskMotion} visible={open}>
       {({ className: motionMaskClassName, style: motionMaskStyle }) => {
         return (
           <div
@@ -114,6 +114,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
   const panelNode: React.ReactNode = (
     <div className={`${prefixCls}-panel-wrapper`}>
       <CSSMotion
+        key="panel"
         {...motionProps}
         visible={open}
         onVisibleChanged={nextVisible => {
@@ -122,6 +123,8 @@ export default function DrawerPopup(props: DrawerPopupProps) {
             scrollLocker?.unLock();
           }
         }}
+        removeOnLeave={false}
+        leavedClassName={`${prefixCls}-panel-wrapper-hidden`}
       >
         {({ className: motionClassName, style: motionStyle }) => {
           return (