diff --git a/.travis.yml b/.travis.yml
index 908a1a89..818244b6 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -7,7 +7,7 @@ notifications:
   - yiminghe@gmail.com
 
 node_js:
-- 12
+- 14
 
 before_install:
 - |
diff --git a/examples/ant-design.tsx b/examples/ant-design.tsx
index 6e03053c..f7c02103 100644
--- a/examples/ant-design.tsx
+++ b/examples/ant-design.tsx
@@ -3,7 +3,8 @@ import '../assets/index.less';
 import * as React from 'react';
 import Dialog from '../src/DialogWrap';
 
-const clearPath = 'M793 242H366v-74c0-6.7-7.7-10.4-12.9' +
+const clearPath =
+  'M793 242H366v-74c0-6.7-7.7-10.4-12.9' +
   '-6.3l-142 112c-4.1 3.2-4.1 9.4 0 12.6l142 112c' +
   '5.2 4.1 12.9 0.4 12.9-6.3v-74h415v470H175c-4.4' +
   ' 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-' +
@@ -19,22 +20,22 @@ const getSvg = (path: string, props = {}, align = false) => {
         fill="currentColor"
         style={align ? { verticalAlign: '-.125em ' } : {}}
       >
-        <path d={path} p-id="5827"></path>
+        <path d={path} p-id="5827" />
       </svg>
     </i>
   );
 };
 
 const MyControl = () => {
-  const [visible1, setVisible1] = React.useState(false);
+  const [visible1, setVisible1] = React.useState(true);
   const [visible2, setVisible2] = React.useState(false);
-  const [visible3, setVisible3] = React.useState(true);
+  const [visible3, setVisible3] = React.useState(false);
   const [width, setWidth] = React.useState(600);
   const [destroyOnClose, setDestroyOnClose] = React.useState(false);
   const [center, setCenter] = React.useState(false);
   const [mousePosition, setMousePosition] = React.useState({
     x: null,
-    y: null
+    y: null,
   });
   const [useIcon, setUseIcon] = React.useState(false);
   const [forceRender, setForceRender] = React.useState(false);
@@ -45,45 +46,45 @@ const MyControl = () => {
       y: e.pageY,
     });
     setVisible1(true);
-  }
+  };
 
   const onClose = () => {
     setVisible1(false);
-  }
+  };
 
   const onClose2 = () => {
     setVisible2(false);
-  }
+  };
 
   const onClose3 = () => {
     setVisible3(false);
-  }
+  };
 
   const closeAll = () => {
     setVisible1(false);
     setVisible2(false);
     setVisible3(false);
-  }
+  };
 
   const onDestroyOnCloseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setDestroyOnClose(e.target.checked);
-  }
+  };
 
   const onForceRenderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setForceRender(e.target.checked);
-  }
+  };
 
   const changeWidth = () => {
     setWidth(width === 600 ? 800 : 600);
-  }
+  };
 
   const centerEvent = (e: React.ChangeEvent<HTMLInputElement>) => {
     setCenter(e.target.checked);
-  }
+  };
 
   const toggleCloseIcon = () => {
     setUseIcon(!useIcon);
-  }
+  };
 
   const style = { width };
 
@@ -109,66 +110,92 @@ const MyControl = () => {
     >
       <input autoFocus />
       <p>basic modal</p>
-      <button type="button" onClick={() => {
-        setVisible1(false);
-        setVisible2(true);
-      }}>打开第二个并关闭当前的</button>
-      <button type="button" onClick={() => {
-        setVisible2(true);
-      }}>打开第二个</button>
-      <button type="button" onClick={changeWidth}>change width</button>
+      <button
+        type="button"
+        onClick={() => {
+          setVisible1(false);
+          setVisible2(true);
+        }}
+      >
+        打开第二个并关闭当前的
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          setVisible2(true);
+        }}
+      >
+        打开第二个
+      </button>
+      <button type="button" onClick={changeWidth}>
+        change width
+      </button>
       <button type="button" onClick={toggleCloseIcon}>
-        use custom icon, is using icon: {useIcon && 'true' || 'false'}.
+        use custom icon, is using icon: {(useIcon && 'true') || 'false'}.
       </button>
       <div style={{ height: 200 }} />
     </Dialog>
   );
 
   const dialog2 = (
-    <Dialog
-      visible={visible2}
-      title="dialog2"
-      onClose={onClose2}
-    >
+    <Dialog visible={visible2} title="dialog2" onClose={onClose2}>
       <input autoFocus />
       <p>basic modal</p>
-      <button type="button" onClick={() => {
-        setVisible3(true);
-      }}>打开第三个</button>
-      <button type="button" onClick={() => {
-        setVisible2(false);
-      }}>关闭当前</button>
-      <button type="button" onClick={closeAll}>关闭所有</button>
-      <button type="button" onClick={changeWidth}>change width</button>
+      <button
+        type="button"
+        onClick={() => {
+          setVisible3(true);
+        }}
+      >
+        打开第三个
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          setVisible2(false);
+        }}
+      >
+        关闭当前
+      </button>
+      <button type="button" onClick={closeAll}>
+        关闭所有
+      </button>
+      <button type="button" onClick={changeWidth}>
+        change width
+      </button>
       <button type="button" onClick={toggleCloseIcon}>
-        use custom icon, is using icon: {useIcon && 'true' || 'false'}.
+        use custom icon, is using icon: {(useIcon && 'true') || 'false'}.
       </button>
       <div style={{ height: 200 }} />
     </Dialog>
   );
 
   const dialog3 = (
-    <Dialog
-      forceRender
-      title="dialog3"
-      visible={visible3}
-      onClose={onClose3}
-    >
+    <Dialog forceRender title="dialog3" visible={visible3} onClose={onClose3}>
       <p>initialized with forceRender and visbile true</p>
-      <button type="button" onClick={() => {
-        setVisible3(false);
-      }}>关闭当前</button>
-      <button type="button" onClick={closeAll}>关闭所有</button>
-      <button type="button" onClick={changeWidth}>change width</button>
+      <button
+        type="button"
+        onClick={() => {
+          setVisible3(false);
+        }}
+      >
+        关闭当前
+      </button>
+      <button type="button" onClick={closeAll}>
+        关闭所有
+      </button>
+      <button type="button" onClick={changeWidth}>
+        change width
+      </button>
       <button type="button" onClick={toggleCloseIcon}>
-        use custom icon, is using icon: {useIcon && 'true' || 'false'}.
+        use custom icon, is using icon: {(useIcon && 'true') || 'false'}.
       </button>
       <div style={{ height: 200 }} />
     </Dialog>
   );
 
   return (
-    <div style={{ width: '90%', margin: '0 auto' }}>
+    <div style={{ width: '90%', margin: '0 auto', height: '150vh' }}>
       <style>
         {`
           .center {
@@ -185,30 +212,19 @@ const MyControl = () => {
         &nbsp;
         <label>
           destroy on close:
-          <input
-            type="checkbox"
-            checked={destroyOnClose}
-            onChange={onDestroyOnCloseChange}
-          />
+          <input type="checkbox" checked={destroyOnClose} onChange={onDestroyOnCloseChange} />
         </label>
         &nbsp;
         <label>
           center
-          <input
-            type="checkbox"
-            checked={center}
-            onChange={centerEvent}
-          />
+          <input type="checkbox" checked={center} onChange={centerEvent} />
         </label>
         &nbsp;
         <label>
           force render
-          <input
-            type="checkbox"
-            checked={forceRender}
-            onChange={onForceRenderChange}
-          />
+          <input type="checkbox" checked={forceRender} onChange={onForceRenderChange} />
         </label>
+        <input placeholder="Useless Input" onClick={onClick} />
       </p>
       {dialog}
       {dialog2}
diff --git a/examples/bootstrap.tsx b/examples/bootstrap.tsx
index 03ecdbe8..40e223bf 100644
--- a/examples/bootstrap.tsx
+++ b/examples/bootstrap.tsx
@@ -9,120 +9,112 @@ const MyControl = () => {
 
   const onClick = () => {
     setVisible(true);
-  }
+  };
 
   const onClose = () => {
     setVisible(false);
-  }
+  };
 
   const onDestroyOnCloseChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setDestroyOnClose(e.target.checked);
-  }
+  };
 
-  let dialog;
-
-  if (visible || !destroyOnClose) {
-    dialog = (
-      <Dialog
-        visible={visible}
-        animation="slide-fade"
-        maskAnimation="fade"
-        onClose={onClose}
-        style={{ width: 600 }}
-        title={<div>第二个弹框</div>}
-        footer={
-          [
-            <button
-              type="button"
-              className="btn btn-default"
-              key="close"
-              onClick={onClose}
-            >
-            Close
-            </button>,
-            <button
-              type="button"
-              className="btn btn-primary"
-              key="save"
-              onClick={onClose}
-            >
-            Save changes
-            </button>,
-          ]
-        }
-      ><h4>Text in a modal</h4>
-        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
-        <hr />
-        <h4>Overflowing text to show scroll behavior</h4>
-        <p>Cras mattis consectetur purus sit amet fermentum.
-          Cras justo odio, dapibus ac facilisis in,
-          egestas eget quam. Morbi leo risus, porta ac consectetur ac,
-          vestibulum at eros.
+  const dialog = (
+    <Dialog
+      visible={visible}
+      destroyOnClose={destroyOnClose}
+      animation="slide-fade"
+      maskAnimation="fade"
+      onClose={onClose}
+      style={{ width: 600 }}
+      title={<div>第二个弹框</div>}
+      footer={[
+        <button type="button" className="btn btn-default" key="close" onClick={onClose}>
+          Close
+        </button>,
+        <button type="button" className="btn btn-primary" key="save" onClick={onClose}>
+          Save changes
+        </button>,
+      ]}
+    >
+      <h4>Text in a modal</h4>
+      <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+      <hr />
+      <h4>Overflowing text to show scroll behavior</h4>
+      <p>
+        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in,
+        egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+      </p>
+      <p>
+        <button type="button" className="btn btn-primary">
+          Primary
+        </button>{' '}
+        <button type="button" className="btn btn-secondary">
+          Secondary
+        </button>{' '}
+        <button type="button" className="btn btn-success">
+          Success
+        </button>{' '}
+        <button type="button" className="btn btn-danger">
+          Danger
+        </button>{' '}
+        <button type="button" className="btn btn-warning">
+          Warning
+        </button>{' '}
+        <button type="button" className="btn btn-info">
+          Info
+        </button>{' '}
+      </p>
+      <p>
+        Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
+        vel augue laoreet rutrum faucibus dolor auctor.
+      </p>
+      <div style={{ display: '' }}>
+        <p>
+          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+          auctor fringilla.
+        </p>
+        <p>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
         </p>
         <p>
-          <button type="button" className="btn btn-primary">Primary</button>{' '}
-          <button type="button" className="btn btn-secondary">Secondary</button>{' '}
-          <button type="button" className="btn btn-success">Success</button>{' '}
-          <button type="button" className="btn btn-danger">Danger</button>{' '}
-          <button type="button" className="btn btn-warning">Warning</button>{' '}
-          <button type="button" className="btn btn-info">Info</button>{' '}
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
+          vel augue laoreet rutrum faucibus dolor auctor.
         </p>
-        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus
-          sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+        <p>
+          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+          auctor fringilla.
         </p>
-        <div style={{ display: '' }}>
-          <p>Aenean lacinia bibendum nulla sed
-            consectetur. Praesent commodo cursus magna,
-            vel scelerisque nisl consectetur et. Donec sed odio dui.
-            Donec
-            ullamcorper nulla non metus auctor fringilla.
-          </p>
-          <p>Cras mattis consectetur purus sit amet fermentum.
-            Cras justo odio, dapibus ac facilisis in, egestas
-            eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>Praesent commodo cursus
-            magna, vel scelerisque nisl consectetur et.
-            Vivamus sagittis lacus vel augue laoreet rutrum faucibus
-            dolor auctor.
-          </p>
-          <p>Aenean lacinia bibendum nulla sed consectetur.
-            Praesent commodo cursus magna, vel
-            scelerisque nisl consectetur et. Donec sed odio dui.
-            Donec ullamcorper nulla non metus auctor
-            fringilla.
-          </p>
-          <p>Cras mattis consectetur purus sit amet fermentum.
-            Cras justo odio, dapibus ac
-            facilisis in, egestas eget quam. Morbi leo risus,
-            porta ac consectetur ac, vestibulum at eros.
-          </p>
-          <p>
-            Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
-            Vivamus sagittis lacus vel augue
-            laoreet rutrum faucibus dolor auctor.
-          </p>
-          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent
-            commodo cursus magna, vel scelerisque nisl consectetur et.
-            Donec sed odio dui. Donec ullamcorper nulla
-            non metus auctor fringilla.
-          </p>
-        </div>
-      </Dialog>
-    );
-  }
+        <p>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+        </p>
+        <p>
+          Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus
+          vel augue laoreet rutrum faucibus dolor auctor.
+        </p>
+        <p>
+          Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+          scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+          auctor fringilla.
+        </p>
+      </div>
+    </Dialog>
+  );
 
   return (
     <div style={{ margin: 20 }}>
       <p>
-        <button type="button" className="btn btn-primary" onClick={onClick}>show dialog</button>
+        <button type="button" className="btn btn-primary" onClick={onClick}>
+          show dialog
+        </button>
         &nbsp;
-        <label>destroy on close:
-          <input
-            type="checkbox"
-            checked={destroyOnClose}
-            onChange={onDestroyOnCloseChange}
-          />
+        <label>
+          destroy on close:
+          <input type="checkbox" checked={destroyOnClose} onChange={onDestroyOnCloseChange} />
         </label>
       </p>
       {dialog}
diff --git a/package.json b/package.json
index f75b8e3d..36899baa 100644
--- a/package.json
+++ b/package.json
@@ -44,11 +44,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
-    "rc-animate": "3.x",
+    "classnames": "^2.2.6",
+    "rc-motion": "^2.3.0",
     "rc-util": "^5.0.1"
   },
   "devDependencies": {
-    "@types/jest": "^26.0.0",
+    "@types/enzyme": "^3.10.7",
+    "@types/jest": "^26.0.14",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@umijs/fabric": "^2.0.0",
diff --git a/src/Dialog.tsx b/src/Dialog.tsx
deleted file mode 100644
index 2f4c9a48..00000000
--- a/src/Dialog.tsx
+++ /dev/null
@@ -1,449 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import KeyCode from 'rc-util/lib/KeyCode';
-import contains from 'rc-util/lib/Dom/contains';
-import Animate from 'rc-animate';
-import LazyRenderBox from './LazyRenderBox';
-import { IDialogPropTypes } from './IDialogPropTypes';
-
-let uuid = 0;
-
-/* eslint react/no-is-mounted:0 */
-
-function getScroll(w: any, top?: boolean) {
-  let ret = w[`page${top ? 'Y' : 'X'}Offset`];
-  const method = `scroll${top ? 'Top' : 'Left'}`;
-  if (typeof ret !== 'number') {
-    const d = w.document;
-    ret = d.documentElement[method];
-    if (typeof ret !== 'number') {
-      ret = d.body[method];
-    }
-  }
-  return ret;
-}
-
-function setTransformOrigin(node: any, value: string) {
-  const { style } = node;
-  ['Webkit', 'Moz', 'Ms', 'ms'].forEach((prefix: string) => {
-    style[`${prefix}TransformOrigin`] = value;
-  });
-  style.transformOrigin = value;
-}
-
-function offset(el: any) {
-  const rect = el.getBoundingClientRect();
-  const pos = {
-    left: rect.left,
-    top: rect.top,
-  };
-  const doc = el.ownerDocument;
-  const w = doc.defaultView || doc.parentWindow;
-  pos.left += getScroll(w);
-  pos.top += getScroll(w, true);
-  return pos;
-}
-
-export interface IDialogChildProps extends IDialogPropTypes {
-  getOpenCount: () => number;
-  switchScrollingEffect?: () => void;
-}
-
-export default class Dialog extends React.Component<IDialogChildProps, any> {
-  static defaultProps = {
-    className: '',
-    mask: true,
-    visible: false,
-    keyboard: true,
-    closable: true,
-    maskClosable: true,
-    destroyOnClose: false,
-    prefixCls: 'rc-dialog',
-    focusTriggerAfterClose: true,
-  };
-
-  private inTransition: boolean = false;
-
-  private titleId: string;
-
-  private openTime: number;
-
-  private lastOutSideFocusNode: HTMLElement | null;
-
-  private wrap: HTMLElement;
-
-  private dialog: any;
-
-  private sentinelStart: HTMLElement;
-
-  private sentinelEnd: HTMLElement;
-
-  private dialogMouseDown: boolean;
-
-  private timeoutId: any;
-
-  private switchScrollingEffect: () => void;
-
-  constructor(props: IDialogChildProps) {
-    super(props);
-    this.titleId = `rcDialogTitle${uuid}`;
-    uuid += 1;
-    this.switchScrollingEffect = props.switchScrollingEffect || (() => {});
-  }
-
-  componentDidMount() {
-    this.componentDidUpdate({});
-    // if forceRender is true, set element style display to be none;
-    if (this.props.forceRender && this.props.visible) {
-      return;
-    }
-    if (
-      (this.props.forceRender || (this.props.getContainer === false && !this.props.visible)) &&
-      this.wrap
-    ) {
-      this.wrap.style.display = 'none';
-    }
-  }
-
-  componentDidUpdate(prevProps: IDialogPropTypes) {
-    const { visible, mousePosition } = this.props;
-
-    if (visible) {
-      // first show
-      if (!prevProps.visible) {
-        this.openTime = Date.now();
-        this.switchScrollingEffect();
-        this.tryFocus();
-        // eslint-disable-next-line react/no-find-dom-node
-        const dialogNode = ReactDOM.findDOMNode(this.dialog);
-        if (mousePosition) {
-          const elOffset = offset(dialogNode);
-          setTransformOrigin(
-            dialogNode,
-            `${mousePosition.x - elOffset.left}px ${mousePosition.y - elOffset.top}px`,
-          );
-        } else {
-          setTransformOrigin(dialogNode, '');
-        }
-      }
-    } else if (prevProps.visible) {
-      this.inTransition = true;
-    }
-  }
-
-  componentWillUnmount() {
-    const { visible, getOpenCount } = this.props;
-    if ((visible || this.inTransition) && !getOpenCount()) {
-      this.switchScrollingEffect();
-    }
-    clearTimeout(this.timeoutId);
-  }
-
-  tryFocus() {
-    if (!contains(this.wrap, document.activeElement)) {
-      this.lastOutSideFocusNode = document.activeElement as HTMLElement;
-      this.sentinelStart.focus();
-    }
-  }
-
-  onAnimateLeave = () => {
-    const { afterClose, getOpenCount, focusTriggerAfterClose, mask } = this.props;
-    // need demo?
-    // https://github.com/react-component/dialog/pull/28
-    if (this.wrap) {
-      this.wrap.style.display = 'none';
-    }
-    this.inTransition = false;
-    // 如果没有打开的状态，则清除 effect 和 overflow: hidden;
-    // https://github.com/ant-design/ant-design/issues/21539
-    if (!getOpenCount()) {
-      this.switchScrollingEffect();
-    }
-    if (mask && this.lastOutSideFocusNode && focusTriggerAfterClose) {
-      try {
-        this.lastOutSideFocusNode.focus({ preventScroll: true });
-      } catch (e) {
-        this.lastOutSideFocusNode = null;
-      }
-      this.lastOutSideFocusNode = null;
-    }
-    if (afterClose) {
-      afterClose();
-    }
-  };
-
-  onDialogMouseDown = () => {
-    this.dialogMouseDown = true;
-  };
-
-  onMaskMouseUp: React.MouseEventHandler<HTMLDivElement> = () => {
-    if (this.dialogMouseDown) {
-      this.timeoutId = setTimeout(() => {
-        this.dialogMouseDown = false;
-      }, 0);
-    }
-  };
-
-  onMaskClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    // android trigger click on open (fastclick??)
-    if (Date.now() - this.openTime < 300) {
-      return;
-    }
-    if (e.target === e.currentTarget && !this.dialogMouseDown) {
-      this.close(e);
-    }
-  };
-
-  onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    const { keyboard, visible } = this.props;
-    if (keyboard && e.keyCode === KeyCode.ESC) {
-      e.stopPropagation();
-      this.close(e);
-      return;
-    }
-    // keep focus inside dialog
-    if (visible) {
-      if (e.keyCode === KeyCode.TAB) {
-        const { activeElement } = document;
-        if (e.shiftKey) {
-          if (activeElement === this.sentinelStart) {
-            this.sentinelEnd.focus();
-          }
-        } else if (activeElement === this.sentinelEnd) {
-          this.sentinelStart.focus();
-        }
-      }
-    }
-  };
-
-  getDialogElement = () => {
-    const {
-      closable,
-      prefixCls,
-      width,
-      height,
-      footer,
-      title,
-      closeIcon,
-      style,
-      className,
-      visible,
-      forceRender,
-      bodyStyle,
-      bodyProps,
-      children,
-      destroyOnClose,
-      modalRender,
-    } = this.props;
-    const dest: any = {};
-    if (width !== undefined) {
-      dest.width = width;
-    }
-    if (height !== undefined) {
-      dest.height = height;
-    }
-
-    let footerNode;
-    if (footer) {
-      footerNode = (
-        <div className={`${prefixCls}-footer`} ref={this.saveRef('footer')}>
-          {footer}
-        </div>
-      );
-    }
-
-    let headerNode;
-    if (title) {
-      headerNode = (
-        <div className={`${prefixCls}-header`} ref={this.saveRef('header')}>
-          <div className={`${prefixCls}-title`} id={this.titleId}>
-            {title}
-          </div>
-        </div>
-      );
-    }
-
-    let closer;
-    if (closable) {
-      closer = (
-        <button
-          type="button"
-          onClick={this.close}
-          aria-label="Close"
-          className={`${prefixCls}-close`}
-        >
-          {closeIcon || <span className={`${prefixCls}-close-x`} />}
-        </button>
-      );
-    }
-
-    const content = (
-      <div className={`${prefixCls}-content`}>
-        {closer}
-        {headerNode}
-        <div
-          className={`${prefixCls}-body`}
-          style={bodyStyle}
-          ref={this.saveRef('body')}
-          {...bodyProps}
-        >
-          {children}
-        </div>
-        {footerNode}
-      </div>
-    )
-
-    const styleBox = { ...style, ...dest };
-    const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' };
-    const transitionName = this.getTransitionName();
-    const dialogElement = (
-      <LazyRenderBox
-        key="dialog-element"
-        role="document"
-        ref={this.saveRef('dialog')}
-        style={styleBox}
-        className={`${prefixCls} ${className || ''}`}
-        visible={visible}
-        forceRender={forceRender}
-        onMouseDown={this.onDialogMouseDown}
-      >
-        <div
-          tabIndex={0}
-          ref={this.saveRef('sentinelStart')}
-          style={sentinelStyle}
-          aria-hidden="true"
-        />
-        {modalRender ? modalRender(content) : content }
-        <div
-          tabIndex={0}
-          ref={this.saveRef('sentinelEnd')}
-          style={sentinelStyle}
-          aria-hidden="true"
-        />
-      </LazyRenderBox>
-    );
-
-    return (
-      <Animate
-        key="dialog"
-        showProp="visible"
-        onLeave={this.onAnimateLeave}
-        transitionName={transitionName}
-        component=""
-        transitionAppear
-      >
-        {visible || !destroyOnClose ? dialogElement : null}
-      </Animate>
-    );
-  };
-
-  getZIndexStyle = () => {
-    const style: any = {};
-    const { zIndex } = this.props;
-    if (zIndex !== undefined) {
-      style.zIndex = zIndex;
-    }
-    return style;
-  };
-
-  getWrapStyle = (): any => {
-    return { ...this.getZIndexStyle(), ...this.props.wrapStyle };
-  };
-
-  getMaskStyle = () => {
-    return { ...this.getZIndexStyle(), ...this.props.maskStyle };
-  };
-
-  getMaskElement = () => {
-    const { mask, prefixCls, visible, maskProps } = this.props;
-    let maskElement;
-    if (mask) {
-      const maskTransition = this.getMaskTransitionName();
-      maskElement = (
-        <LazyRenderBox
-          style={this.getMaskStyle()}
-          key="mask"
-          className={`${prefixCls}-mask`}
-          hiddenClassName={`${prefixCls}-mask-hidden`}
-          visible={visible}
-          {...maskProps}
-        />
-      );
-      if (maskTransition) {
-        maskElement = (
-          <Animate
-            key="mask"
-            showProp="visible"
-            transitionAppear
-            component=""
-            transitionName={maskTransition}
-          >
-            {maskElement}
-          </Animate>
-        );
-      }
-    }
-    return maskElement;
-  };
-
-  getMaskTransitionName = () => {
-    const { maskTransitionName, maskAnimation, prefixCls } = this.props;
-    let transitionName = maskTransitionName;
-    const animation = maskAnimation;
-    if (!transitionName && animation) {
-      transitionName = `${prefixCls}-${animation}`;
-    }
-
-    return transitionName;
-  };
-
-  getTransitionName = () => {
-    const { transitionName, animation, prefixCls } = this.props;
-    let transitionNameResult = transitionName;
-    if (!transitionName && animation) {
-      transitionNameResult = `${prefixCls}-${animation}`;
-    }
-    return transitionNameResult;
-  };
-
-  close = (e: any) => {
-    const { onClose } = this.props;
-    if (onClose) {
-      onClose(e);
-    }
-  };
-
-  saveRef = (name: string) => (node: any) => {
-    (this as any)[name] = node;
-  };
-
-  render() {
-    const { props } = this;
-    const { prefixCls, maskClosable } = props;
-    const style = this.getWrapStyle();
-    // clear hide display
-    // and only set display after async anim, not here for hide
-    if (props.visible) {
-      style.display = null;
-    }
-    return (
-      <div className={`${prefixCls}-root`}>
-        {this.getMaskElement()}
-        <div
-          tabIndex={-1}
-          onKeyDown={this.onKeyDown}
-          className={`${prefixCls}-wrap ${props.wrapClassName || ''}`}
-          ref={this.saveRef('wrap')}
-          onClick={maskClosable ? this.onMaskClick : null}
-          onMouseUp={maskClosable ? this.onMaskMouseUp : null}
-          role="dialog"
-          aria-labelledby={props.title ? this.titleId : null}
-          style={style}
-          {...props.wrapProps}
-        >
-          {this.getDialogElement()}
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/src/Dialog/Content.tsx b/src/Dialog/Content.tsx
new file mode 100644
index 00000000..727130b9
--- /dev/null
+++ b/src/Dialog/Content.tsx
@@ -0,0 +1,157 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import classNames from 'classnames';
+import CSSMotion from 'rc-motion';
+import { IDialogChildProps } from '.';
+import { offset } from '../util';
+
+const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' };
+
+export interface ContentProps extends IDialogChildProps {
+  motionName: string;
+  ariaId: string;
+  onVisibleChanged: (visible: boolean) => void;
+}
+
+export interface ContentRef {
+  focus: () => void;
+  getDOM: () => HTMLDivElement;
+  changeActive: (next: boolean) => void;
+}
+
+const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
+  const {
+    closable,
+    prefixCls,
+    width,
+    height,
+    footer,
+    title,
+    closeIcon,
+    style,
+    className,
+    visible,
+    forceRender,
+    bodyStyle,
+    bodyProps,
+    children,
+    destroyOnClose,
+    modalRender,
+    motionName,
+    ariaId,
+    onClose,
+    onVisibleChanged,
+    mousePosition,
+  } = props;
+
+  const sentinelStartRef = useRef<HTMLDivElement>();
+  const sentinelEndRef = useRef<HTMLDivElement>();
+  const dialogRef = useRef<HTMLDivElement>();
+
+  // ============================== Ref ===============================
+  React.useImperativeHandle(ref, () => ({
+    focus: () => {
+      sentinelStartRef.current?.focus();
+    },
+    getDOM: () => dialogRef.current,
+    changeActive: (next) => {
+      const { activeElement } = document;
+      if (next && activeElement === sentinelEndRef.current) {
+        sentinelStartRef.current.focus();
+      } else if (!next && activeElement === sentinelStartRef.current) {
+        sentinelEndRef.current.focus();
+      }
+    },
+  }));
+
+  // ============================= Style ==============================
+  const [transformOrigin, setTransformOrigin] = React.useState<string>();
+  const contentStyle: React.CSSProperties = {};
+  if (width !== undefined) {
+    contentStyle.width = width;
+  }
+  if (height !== undefined) {
+    contentStyle.height = height;
+  }
+  if (transformOrigin) {
+    contentStyle.transformOrigin = transformOrigin;
+  }
+
+  function onPrepare() {
+    const elementOffset = offset(dialogRef.current);
+
+    setTransformOrigin(
+      mousePosition
+        ? `${mousePosition.x - elementOffset.left}px ${mousePosition.y - elementOffset.top}px`
+        : '',
+    );
+  }
+
+  // ============================= Render =============================
+  let footerNode: React.ReactNode;
+  if (footer) {
+    footerNode = <div className={`${prefixCls}-footer`}>{footer}</div>;
+  }
+
+  let headerNode: React.ReactNode;
+  if (title) {
+    headerNode = (
+      <div className={`${prefixCls}-header`}>
+        <div className={`${prefixCls}-title`} id={ariaId}>
+          {title}
+        </div>
+      </div>
+    );
+  }
+
+  let closer: React.ReactNode;
+  if (closable) {
+    closer = (
+      <button type="button" onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
+        {closeIcon || <span className={`${prefixCls}-close-x`} />}
+      </button>
+    );
+  }
+
+  const content = (
+    <div className={`${prefixCls}-content`}>
+      {closer}
+      {headerNode}
+      <div className={`${prefixCls}-body`} style={bodyStyle} {...bodyProps}>
+        {children}
+      </div>
+      {footerNode}
+    </div>
+  );
+
+  return (
+    <CSSMotion
+      visible={visible}
+      onVisibleChanged={onVisibleChanged}
+      onAppearPrepare={onPrepare}
+      onEnterPrepare={onPrepare}
+      forceRender={forceRender}
+      motionName={motionName}
+      removeOnLeave={destroyOnClose}
+      ref={dialogRef}
+    >
+      {({ className: motionClassName, style: motionStyle }, motionRef) => (
+        <div
+          key="dialog-element"
+          role="document"
+          ref={motionRef}
+          style={{ ...motionStyle, ...style, ...contentStyle }}
+          className={classNames(prefixCls, className, motionClassName)}
+        >
+          <div tabIndex={0} ref={sentinelStartRef} style={sentinelStyle} aria-hidden="true" />
+          {modalRender ? modalRender(content) : content}
+          <div tabIndex={0} ref={sentinelEndRef} style={sentinelStyle} aria-hidden="true" />
+        </div>
+      )}
+    </CSSMotion>
+  );
+});
+
+Content.displayName = 'Content';
+
+export default Content;
diff --git a/src/Dialog/Mask.tsx b/src/Dialog/Mask.tsx
new file mode 100644
index 00000000..d402c290
--- /dev/null
+++ b/src/Dialog/Mask.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import CSSMotion from 'rc-motion';
+
+export interface MaskProps {
+  prefixCls: string;
+  visible: boolean;
+  motionName?: string;
+  style?: React.CSSProperties;
+  maskProps?: React.HTMLAttributes<HTMLDivElement>;
+}
+
+export default function Mask(props: MaskProps) {
+  const { prefixCls, style, visible, maskProps, motionName } = props;
+
+  return (
+    <CSSMotion
+      key="mask"
+      visible={visible}
+      motionName={motionName}
+      leavedClassName={`${prefixCls}-mask-hidden`}
+    >
+      {({ className: motionClassName, style: motionStyle }) => (
+        <div
+          style={{ ...motionStyle, ...style }}
+          className={classNames(`${prefixCls}-mask`, motionClassName)}
+          {...maskProps}
+        />
+      )}
+    </CSSMotion>
+  );
+}
diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx
new file mode 100644
index 00000000..412c9fdd
--- /dev/null
+++ b/src/Dialog/index.tsx
@@ -0,0 +1,171 @@
+import * as React from 'react';
+import { useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import KeyCode from 'rc-util/lib/KeyCode';
+import contains from 'rc-util/lib/Dom/contains';
+import { IDialogPropTypes } from '../IDialogPropTypes';
+import Mask from './Mask';
+import { getMotionName, getUUID } from '../util';
+import Content, { ContentRef } from './Content';
+
+export interface IDialogChildProps extends IDialogPropTypes {
+  // zombieJ: This should be handle on top instead of each Dialog.
+  // TODO: refactor to remove this.
+  getOpenCount: () => number;
+  switchScrollingEffect?: () => void;
+}
+
+export default function Dialog(props: IDialogChildProps) {
+  const {
+    prefixCls = 'rc-dialog',
+    zIndex,
+    visible = false,
+    keyboard = true,
+    focusTriggerAfterClose = true,
+    switchScrollingEffect = () => {},
+
+    // Wrapper
+    title,
+    wrapStyle,
+    wrapClassName,
+    wrapProps,
+    onClose,
+    afterClose,
+
+    // Dialog
+    transitionName,
+    animation,
+    closable = true,
+
+    // Mask
+    mask = true,
+    maskTransitionName,
+    maskAnimation,
+    maskClosable = true,
+    maskStyle,
+    maskProps,
+  } = props;
+
+  const lastOutSideActiveElementRef = useRef<HTMLElement>();
+  const wrapperRef = useRef<HTMLDivElement>();
+  const contentRef = useRef<ContentRef>();
+
+  const [animatedVisible, setAnimatedVisible] = React.useState(visible);
+
+  // ========================== Init ==========================
+  const ariaIdRef = useRef<string>();
+  if (!ariaIdRef.current) {
+    ariaIdRef.current = `rcDialogTitle${getUUID()}`;
+  }
+
+  // ========================= Events =========================
+  function onDialogVisibleChanged(newVisible: boolean) {
+    if (newVisible) {
+      // Try to focus
+      if (!contains(wrapperRef.current, document.activeElement)) {
+        lastOutSideActiveElementRef.current = document.activeElement as HTMLElement;
+        contentRef.current?.focus();
+      }
+    } else {
+      // Clean up scroll bar & focus back
+      setAnimatedVisible(false);
+      switchScrollingEffect();
+
+      if (mask && lastOutSideActiveElementRef.current && focusTriggerAfterClose) {
+        try {
+          lastOutSideActiveElementRef.current.focus({ preventScroll: true });
+        } catch (e) {
+          // Do nothing
+        }
+        lastOutSideActiveElementRef.current = null;
+      }
+
+      afterClose?.();
+    }
+  }
+
+  function onInternalClose(e: React.SyntheticEvent) {
+    onClose?.(e);
+  }
+
+  // >>> Wrapper
+  // Close only when element not on dialog
+  let onWrapperClick: (e: React.SyntheticEvent) => void = null;
+  if (maskClosable) {
+    onWrapperClick = (e) => {
+      if (!contains(contentRef.current.getDOM(), e.target as HTMLElement)) {
+        onInternalClose(e);
+      }
+    };
+  }
+
+  function onWrapperKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (keyboard && e.keyCode === KeyCode.ESC) {
+      e.stopPropagation();
+      onInternalClose(e);
+      return;
+    }
+
+    // keep focus inside dialog
+    if (visible) {
+      if (e.keyCode === KeyCode.TAB) {
+        contentRef.current.changeActive(!e.shiftKey);
+      }
+    }
+  }
+
+  // ========================= Effect =========================
+  useEffect(() => {
+    if (visible) {
+      setAnimatedVisible(true);
+      switchScrollingEffect();
+    }
+  }, [visible]);
+
+  // Remove direct should also check the scroll bar update
+  useEffect(
+    () => () => {
+      switchScrollingEffect();
+    },
+    [],
+  );
+
+  // ========================= Render =========================
+  return (
+    <div className={`${prefixCls}-root`}>
+      <Mask
+        prefixCls={prefixCls}
+        visible={mask && visible}
+        motionName={getMotionName(prefixCls, maskTransitionName, maskAnimation)}
+        style={{
+          zIndex,
+          ...maskStyle,
+        }}
+        maskProps={maskProps}
+      />
+      <div
+        tabIndex={-1}
+        onKeyDown={onWrapperKeyDown}
+        className={classNames(`${prefixCls}-wrap`, wrapClassName)}
+        ref={wrapperRef}
+        onClick={onWrapperClick}
+        role="dialog"
+        aria-labelledby={title ? ariaIdRef.current : null}
+        style={{ zIndex, ...wrapStyle, display: !animatedVisible ? 'none' : null }}
+        {...wrapProps}
+      >
+        <Content
+          {...props}
+          ref={contentRef}
+          closable={closable}
+          ariaId={ariaIdRef.current}
+          prefixCls={prefixCls}
+          visible={visible}
+          onClose={onInternalClose}
+          onVisibleChanged={onDialogVisibleChanged}
+          motionName={getMotionName(prefixCls, transitionName, animation)}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/DialogWrap.tsx b/src/DialogWrap.tsx
index 525f83fa..458f3c9d 100644
--- a/src/DialogWrap.tsx
+++ b/src/DialogWrap.tsx
@@ -13,7 +13,15 @@ import { IDialogPropTypes } from './IDialogPropTypes';
  * */
 
 const DialogWrap: React.FC<IDialogPropTypes> = (props: IDialogPropTypes) => {
-  const { visible, getContainer, forceRender } = props;
+  const { visible, getContainer, forceRender, destroyOnClose, afterClose } = props;
+  const [animatedVisible, setAnimatedVisible] = React.useState<boolean>(visible);
+
+  React.useEffect(() => {
+    if (visible) {
+      setAnimatedVisible(true);
+    }
+  }, [visible]);
+
   // 渲染在当前 dom 里；
   if (getContainer === false) {
     return (
@@ -24,9 +32,23 @@ const DialogWrap: React.FC<IDialogPropTypes> = (props: IDialogPropTypes) => {
     );
   }
 
+  // Destroy on close will remove wrapped div
+  if (!forceRender && destroyOnClose && !animatedVisible) {
+    return null;
+  }
+
   return (
     <Portal visible={visible} forceRender={forceRender} getContainer={getContainer}>
-      {(childProps: IDialogChildProps) => <Dialog {...props} {...childProps} />}
+      {(childProps: IDialogChildProps) => (
+        <Dialog
+          {...props}
+          afterClose={() => {
+            afterClose?.();
+            setAnimatedVisible(false);
+          }}
+          {...childProps}
+        />
+      )}
     </Portal>
   );
 };
diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx
index ba16a531..b7bf28ee 100644
--- a/src/IDialogPropTypes.tsx
+++ b/src/IDialogPropTypes.tsx
@@ -1,6 +1,5 @@
 import { ReactNode, CSSProperties, SyntheticEvent } from 'react';
-
-type IStringOrHtmlElement = string | HTMLElement;
+import { GetContainer } from 'rc-util/lib/PortalWrapper';
 
 export interface IDialogPropTypes {
   className?: string;
@@ -9,14 +8,14 @@ export interface IDialogPropTypes {
   mask?: boolean;
   children?: any;
   afterClose?: () => any;
-  onClose?: (e: SyntheticEvent<HTMLDivElement>) => any;
+  onClose?: (e: SyntheticEvent) => any;
   closable?: boolean;
   maskClosable?: boolean;
   visible?: boolean;
-  destroyOnClose ?: boolean;
+  destroyOnClose?: boolean;
   mousePosition?: {
-    x: number,
-    y: number,
+    x: number;
+    y: number;
   };
   title?: ReactNode;
   footer?: ReactNode;
@@ -35,7 +34,7 @@ export interface IDialogPropTypes {
   bodyProps?: any;
   maskProps?: any;
   wrapProps?: any;
-  getContainer?: IStringOrHtmlElement | (() => IStringOrHtmlElement) | false;
+  getContainer?: GetContainer | false;
   closeIcon?: ReactNode;
   modalRender?: (node: ReactNode) => ReactNode;
   forceRender?: boolean;
diff --git a/src/LazyRenderBox.tsx b/src/LazyRenderBox.tsx
deleted file mode 100644
index ca08f7d3..00000000
--- a/src/LazyRenderBox.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-
-export interface ILazyRenderBoxPropTypes {
-  className?: string;
-  visible?: boolean;
-  hiddenClassName?: string;
-  role?: string;
-  style?: {};
-  forceRender?: boolean;
-  onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
-}
-
-export default class LazyRenderBox extends React.Component<ILazyRenderBoxPropTypes, any> {
-  shouldComponentUpdate(nextProps: ILazyRenderBoxPropTypes) {
-    if (nextProps.forceRender) {
-      return true;
-    }
-    return !!nextProps.hiddenClassName || !!nextProps.visible;
-  }
-
-  render() {
-    const { className, hiddenClassName, visible, forceRender, ...restProps } = this.props;
-    let useClassName = className;
-    if (!!hiddenClassName && !visible) {
-      useClassName += ` ${hiddenClassName}`;
-    }
-    return <div {...restProps} className={useClassName} />;
-  }
-}
diff --git a/src/util.ts b/src/util.ts
new file mode 100644
index 00000000..445563a2
--- /dev/null
+++ b/src/util.ts
@@ -0,0 +1,46 @@
+// =============================== Motion ===============================
+export function getMotionName(prefixCls: string, transitionName?: string, animationName?: string) {
+  let motionName = transitionName;
+  if (!motionName && animationName) {
+    motionName = `${prefixCls}-${animationName}`;
+  }
+  return motionName;
+}
+
+// ================================ UUID ================================
+let uuid = -1;
+export function getUUID() {
+  uuid += 1;
+  return uuid;
+}
+
+// =============================== Offset ===============================
+function getScroll(w: Window, top?: boolean): number {
+  let ret = w[`page${top ? 'Y' : 'X'}Offset`];
+  const method = `scroll${top ? 'Top' : 'Left'}`;
+  if (typeof ret !== 'number') {
+    const d = w.document;
+    ret = d.documentElement[method];
+    if (typeof ret !== 'number') {
+      ret = d.body[method];
+    }
+  }
+  return ret;
+}
+
+interface CompatibleDocument extends Document {
+  parentWindow?: Window;
+}
+
+export function offset(el: Element) {
+  const rect = el.getBoundingClientRect();
+  const pos = {
+    left: rect.left,
+    top: rect.top,
+  };
+  const doc = el.ownerDocument as CompatibleDocument;
+  const w = doc.defaultView || doc.parentWindow;
+  pos.left += getScroll(w);
+  pos.top += getScroll(w, true);
+  return pos;
+}
diff --git a/tests/index.spec.js b/tests/index.spec.js
index 7f2917ee..a5996d93 100644
--- a/tests/index.spec.js
+++ b/tests/index.spec.js
@@ -1,407 +1,287 @@
-/* eslint-disable react/no-render-return-value */
-/* eslint-disable func-names */
+/* eslint-disable react/no-render-return-value, max-classes-per-file, func-names, no-console */
 import React, { cloneElement } from 'react';
+import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
-
+import Portal from 'rc-util/lib/Portal';
 import KeyCode from 'rc-util/lib/KeyCode';
-
 import Dialog from '../src';
-import '../assets/bootstrap.less';
 
 describe('dialog', () => {
-  let dialog;
-  let callback;
-  class DialogWrap extends React.Component {
-    state = {
-      visible: false,
-      maskClosable: true,
-    };
-
-    render() {
-      return (
-        <Dialog
-          {...this.props}
-          visible={this.state.visible}
-          maskClosable={this.state.maskClosable}
-        />
-      );
-    }
-  }
-
   beforeEach(() => {
-    function onClose() {
-      callback = 1;
-      dialog.setState({
-        visible: false,
-      });
-    }
-
-    callback = 0;
-    dialog = mount(
-      <DialogWrap style={{ width: 600 }} onClose={onClose} closeIcon="test">
-        <p>第一个dialog</p>
-      </DialogWrap>,
-    );
-
     jest.useFakeTimers();
   });
 
   afterEach(() => {
-    dialog.unmount();
     jest.useRealTimers();
   });
 
   it('show', () => {
-    dialog.setState({ visible: true });
+    const wrapper = mount(<Dialog visible />);
     jest.runAllTimers();
-    dialog.update();
-    expect(dialog.find('.rc-dialog-wrap').props().style.display).toEqual(null);
+    wrapper.update();
+    expect(wrapper.find('.rc-dialog-wrap').props().style.display).toBeFalsy();
   });
 
   it('close', () => {
-    dialog.setState({ visible: true });
-    dialog.setState({ visible: false });
+    const wrapper = mount(<Dialog visible />);
+    jest.runAllTimers();
+
+    wrapper.setProps({ visible: false });
     jest.runAllTimers();
-    dialog.update();
-    expect(dialog.find('.rc-dialog-wrap').props().style).toEqual({});
+    wrapper.update();
+
+    expect(wrapper.find('.rc-dialog-wrap').props().style.display).toEqual('none');
   });
 
   it('create & root & mask', () => {
-    expect(dialog.find('.rc-dialog').length).toBe(0);
-    dialog.setState({ visible: true });
+    const wrapper = mount(<Dialog visible />);
     jest.runAllTimers();
-    dialog.update();
-    expect(dialog.find('.rc-dialog-root').length).toBeTruthy();
-    expect(dialog.find('.rc-dialog-mask').length).toBeTruthy();
+    wrapper.update();
+
+    expect(wrapper.find('.rc-dialog-root').length).toBeTruthy();
+    expect(wrapper.find('.rc-dialog-mask').length).toBeTruthy();
   });
 
   it('click close', () => {
-    dialog.setState({ visible: true });
+    const onClose = jest.fn();
+    const wrapper = mount(<Dialog closeIcon="test" onClose={onClose} visible />);
     jest.runAllTimers();
-    dialog.update();
-    const btn = dialog.find('.rc-dialog-close');
-    expect(btn.props().children).toBe('test');
+    wrapper.update();
+
+    const btn = wrapper.find('.rc-dialog-close');
+    expect(btn.text()).toBe('test');
     btn.simulate('click');
+
     jest.runAllTimers();
-    dialog.update();
-    expect(callback).toBe(1);
+    wrapper.update();
+    expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  it("destroy on hide should unmount child components on close", () => {
+  it('destroy on hide should unmount child components on close', () => {
     const wrapper = mount(
-      <DialogWrap destroyOnClose>
-        <input className="test-input"/>
-      </DialogWrap>
+      <Dialog destroyOnClose>
+        <input className="test-input" />
+      </Dialog>,
+      { attachTo: document.body },
     );
-    wrapper.setState({ visible: true });
+
+    // Show
+    wrapper.setProps({ visible: true });
     jest.runAllTimers();
     wrapper.update();
+
     document.getElementsByClassName('.test-input').value = 'test';
     expect(document.getElementsByClassName('.test-input').value).toBe('test');
-    wrapper.setState({ visible: false });
+
+    // Hide
+    wrapper.setProps({ visible: false });
     jest.runAllTimers();
     wrapper.update();
-    wrapper.setState({ visible: true });
+
+    // Show
+    wrapper.setProps({ visible: true });
     jest.runAllTimers();
     wrapper.update();
+
     expect(document.getElementsByClassName('.test-input').value).toBeUndefined();
     wrapper.unmount();
-  })
+  });
 
   it('esc to close', () => {
-    dialog.setState({ visible: true });
+    const onClose = jest.fn();
+    const wrapper = mount(<Dialog onClose={onClose} visible />);
     jest.runAllTimers();
-    dialog.update();
-    dialog
-      .find('.rc-dialog')
-      .at(0)
-      .simulate('keyDown', { keyCode: KeyCode.ESC });
+    wrapper.update();
+
+    wrapper.find('.rc-dialog').simulate('keyDown', { keyCode: KeyCode.ESC });
     jest.runAllTimers();
-    dialog.update();
-    expect(dialog.find('.rc-dialog-wrap').props().style).toEqual({});
+    wrapper.update();
+    expect(onClose).toHaveBeenCalled();
   });
 
   it('mask to close', () => {
-    let now = 0;
-    const originDateNow = Date.now;
+    const onClose = jest.fn();
+    const wrapper = mount(<Dialog onClose={onClose} visible />);
 
-    // disable https://github.com/react-component/dialog/blob/d9604fa6ad40e949999456d8c020e47593e48f0d/src/Dialog.tsx#L188 
-    Date.now = () => {
-      now += 500
-      return now
-    };
-
-    dialog.setState({ visible: true });
-    jest.runAllTimers();
-    dialog.update();
-    const mask = dialog.find('.rc-dialog-wrap').first();
-    mask.simulate('click');
+    // Mask close
+    wrapper.find('.rc-dialog-wrap').simulate('click');
     jest.runAllTimers();
-    dialog.update();
-    expect(callback).toBe(1);
-    expect(dialog.find('.rc-dialog-wrap').props().style).toEqual({});
-    dialog.setState({ visible: true, maskClosable: false });
-    jest.runAllTimers();
-    dialog.update();
-    expect(dialog.find('.rc-dialog-wrap').props().style.display).toEqual(null);
+    wrapper.update();
+    expect(onClose).toHaveBeenCalled();
+    onClose.mockReset();
 
-    Date.now = originDateNow;
+    // Mask can not close
+    wrapper.setProps({ maskClosable: false });
+    wrapper.find('.rc-dialog-wrap').simulate('click');
+    jest.runAllTimers();
+    wrapper.update();
+    expect(onClose).not.toHaveBeenCalled();
   });
 
   it('renderToBody', () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
-    const d = mount(
-      <DialogWrap>
+    const wrapper = mount(
+      <Dialog visible={false}>
         <p className="renderToBody">1</p>
-      </DialogWrap>, { attachTo: container }
+      </Dialog>,
+      { attachTo: container },
     );
-    expect(d.find('.renderToBody').length).toBe(0);
-    expect(d.find('.rc-dialog-wrap').length).toBe(0);
-    d.setState({ visible: true });
+
+    expect(wrapper.find('.renderToBody')).toHaveLength(0);
+    expect(wrapper.find('.rc-dialog-wrap')).toHaveLength(0);
+
+    // Visible
+    wrapper.setProps({ visible: true });
     jest.runAllTimers();
-    d.update();
-    expect(d.find('.rc-dialog-wrap').length).toBeTruthy();
-    expect(d.find('.renderToBody').length).toBeTruthy();
-    expect(d.find('.rc-dialog-wrap').getDOMNode().parentNode.parentNode).not.toBe(container);
-    d.unmount();
-    expect(d.find('.renderToBody').length).toBe(0);
-    expect(d.find('.rc-dialog-wrap').length).toBe(0);
+    wrapper.update();
+
+    expect(wrapper.find('.rc-dialog-wrap')).toHaveLength(1);
+    expect(wrapper.find('.renderToBody')).toHaveLength(1);
+    expect(container.contains(wrapper.find('.rc-dialog-wrap').getDOMNode())).toBeFalsy();
+
+    wrapper.unmount();
+    document.body.removeChild(container);
   });
 
   it('getContainer', () => {
     const returnedContainer = document.createElement('div');
-    const d = mount(
-      <DialogWrap getContainer={() => returnedContainer}>
+    const wrapper = mount(
+      <Dialog visible getContainer={() => returnedContainer}>
         <p className="getContainer">Hello world!</p>
-      </DialogWrap>
+      </Dialog>,
     );
-    d.setState({ visible: true });
-    jest.runAllTimers();
-    d.update();
-    // fix issue #10656, must change this test
-    expect(d.find('.rc-dialog-wrap').getDOMNode().parentNode.parentNode.parentNode).toBe(returnedContainer);
-    d.unmount();
+
+    expect(returnedContainer.contains(wrapper.find('.rc-dialog-wrap').getDOMNode())).toBeTruthy();
+    wrapper.unmount();
+  });
+
+  it('render title correctly', () => {
+    const wrapper = mount(<Dialog visible title="bamboo" />);
+    expect(wrapper.find('.rc-dialog-header').text()).toBe('bamboo');
   });
 
   it('render footer correctly', () => {
-    const d = mount(<DialogWrap footer="test" />);
-    d.setState({ visible: true });
-    jest.runAllTimers();
-    d.update();
-    expect(d.find('.rc-dialog-footer').length).toBeTruthy();
-    expect(d.find('.rc-dialog-footer').props().children).toBe('test');
-    d.unmount();
+    const wrapper = mount(<Dialog visible footer="test" />);
+    expect(wrapper.find('.rc-dialog-footer').text()).toBe('test');
   });
 
   it('support input autoFocus', () => {
-    const d = mount(
-      <DialogWrap>
+    const wrapper = mount(
+      <Dialog visible>
         <input autoFocus />
-      </DialogWrap>,
+      </Dialog>,
+      { attachTo: document.body },
     );
-    d.setState({ visible: true });
-    jest.runAllTimers();
-    d.update();
     expect(document.activeElement).toBe(document.querySelector('input'));
-    d.unmount();
+    wrapper.unmount();
   });
 
-  it('trap focus after shift-tabbing', () => {
-    dialog.setState({ visible: true });
-    jest.runAllTimers();
-    dialog.update();
-    const shiftTabbingDescriptor = {
-      key: 'TAB',
-      keyCode: 9,
-      which: 9,
-      shiftKey: true
-    }
-    dialog.find('.rc-dialog-wrap').at(0).simulate('keyDown', shiftTabbingDescriptor);
-    const sentinelEnd = document.querySelectorAll('.rc-dialog-content + div')[0];
-    expect(document.activeElement).toBe(sentinelEnd);
+  describe('Tab should keep focus in dialog', () => {
+    it('basic tabbing', () => {
+      const wrapper = mount(<Dialog visible />, { attachTo: document.body });
+      const sentinelEnd = document.querySelectorAll('.rc-dialog-content + div')[0];
+      sentinelEnd.focus();
+
+      wrapper.find('.rc-dialog-wrap').simulate('keyDown', {
+        keyCode: KeyCode.TAB,
+      });
+
+      const sentinelStart = document.querySelectorAll('.rc-dialog > div')[0];
+      expect(document.activeElement).toBe(sentinelStart);
+
+      wrapper.unmount();
+    });
+
+    it('trap focus after shift-tabbing', () => {
+      const wrapper = mount(<Dialog visible />, { attachTo: document.body });
+      wrapper.find('.rc-dialog-wrap').simulate('keyDown', {
+        keyCode: KeyCode.TAB,
+        shiftKey: true,
+      });
+      const sentinelEnd = document.querySelectorAll('.rc-dialog-content + div')[0];
+      expect(document.activeElement).toBe(sentinelEnd);
+
+      wrapper.unmount();
+    });
   });
 
   it('sets transform-origin when property mousePosition is set', () => {
-    const d = mount(
+    const wrapper = mount(
       <Dialog style={{ width: 600 }} mousePosition={{ x: 100, y: 100 }} visible>
         <p>the dialog</p>
       </Dialog>,
     );
-    jest.runAllTimers();
-    d.update();
-    expect(d.find('.rc-dialog').at(0).getDOMNode().style['transform-origin']).toBeTruthy();
-    d.unmount();
-  });
 
-  it('can get dom element before dialog first show when forceRender is set true ', () => {
-    const d = mount(
-      <Dialog forceRender>
-        <div>forceRender element</div>
-      </Dialog>,
-    );
-    expect(d.find('.rc-dialog-body > div').props().children).toEqual('forceRender element');
-    d.unmount();
-  });
+    // Trigger position align
+    act(() => {
+      wrapper
+        .find('Content CSSMotion')
+        .props()
+        .onAppearPrepare();
+    });
 
-  it('getContainer is false', () => {
-    const d = mount(
-      <Dialog getContainer={false}>
-        <div>forceRender element</div>
-      </Dialog>,
-    );
-    expect(d.find('.rc-dialog-body > div').props().children).toEqual('forceRender element');
     expect(
-      d
-        .find('.rc-dialog-wrap')
+      wrapper
+        .find('.rc-dialog')
         .at(0)
-        .props().style,
-    ).toEqual({});
-    d.unmount();
+        .getDOMNode().style['transform-origin'],
+    ).toBeTruthy();
   });
 
-  it('getContainer is false and visible is true', () => {
-    const d = mount(
-      <Dialog getContainer={false} visible>
+  it('can get dom element before dialog first show when forceRender is set true ', () => {
+    const wrapper = mount(
+      <Dialog forceRender>
         <div>forceRender element</div>
       </Dialog>,
     );
-    expect(d.find('.rc-dialog-body > div').props().children).toEqual('forceRender element');
-    expect(d.find('.rc-dialog-wrap').props().style.display).toEqual(null);
-    d.unmount();
+    expect(wrapper.find('.rc-dialog-body > div').text()).toEqual('forceRender element');
   });
 
-  it('should not close if mouse down in dialog', () => {
-    dialog.setState({ visible: true });
-    jest.runAllTimers();
-    dialog.update();
-    const dialogBody = dialog.find('.rc-dialog-body').at(0);
-    dialogBody.simulate('mousedown');
-    const wrapper = dialog.find('.rc-dialog-wrap').at(0);
-    wrapper.simulate('mouseup');
-    expect(dialog.state().visible).toBe(true);
+  describe('getContainer is false', () => {
+    it('not set', () => {
+      const wrapper = mount(
+        <Dialog visible>
+          <div>forceRender element</div>
+        </Dialog>,
+      );
+      expect(wrapper.find('.rc-dialog-body > div').text()).toEqual('forceRender element');
+      expect(wrapper.find(Portal)).toHaveLength(1);
+    });
+
+    it('set to false', () => {
+      const wrapper = mount(
+        <Dialog visible getContainer={false}>
+          <div>forceRender element</div>
+        </Dialog>,
+      );
+      expect(wrapper.find('.rc-dialog-body > div').text()).toEqual('forceRender element');
+      expect(wrapper.find(Portal)).toHaveLength(0);
+    });
   });
 
-  it('Single Dialog body overflow set correctly', () => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    const d = mount(<DialogWrap />, { attachTo: container });
-    document.body.style.overflow = 'scroll';
-    d.setState({ visible: true });
-    jest.runAllTimers();
-    d.update();
-    expect(document.body.style.overflow).toBe('hidden');
-    d.setState({ visible: false });
-    jest.runAllTimers();
-    d.update();
-    expect(document.body.style.overflow).toBe('scroll');
-    d.unmount();
+  it('should not close if mouse down in dialog', () => {
+    const onClose = jest.fn();
+    const wrapper = mount(<Dialog onClose={onClose} visible />);
+    wrapper.find('.rc-dialog-body').simulate('click');
+    expect(onClose).not.toHaveBeenCalled();
   });
 
-  it('Multiple Dialog body overflow set correctly', () => {
-    const container = document.createElement('div');
-    document.body.style.overflow = "scroll"
-
-    class MultipleDialogWrap extends React.Component {
-      state = {
-        visible: false,
-        visible2: false,
-      };
-
-      render() {
-        return (
-          <div>
-            <Dialog
-              {...this.props}
-              visible={this.state.visible}
-            />
-            <Dialog
-              {...this.props}
-              visible={this.state.visible2}
-            />
-          </div>
-        );
-      }
-    }
-
-    const d = mount((
-      <MultipleDialogWrap>
-        <div>forceRender element</div>
-      </MultipleDialogWrap>
-    ), { attachTo: container });
-
-    expect(d.find('.rc-dialog').length).toBe(0);
-
-    d.setState({ visible: true });
-    jest.runAllTimers();
-    d.update();
-    
-    expect(d.find('div.rc-dialog').length).toBe(1);
-    expect(document.body.style.overflow).toBe('hidden');
-
-    d.setState({ visible2: true });
-    jest.runAllTimers();
-    d.update();
-
-    expect(d.find('div.rc-dialog').length).toBe(2);
-    expect(document.body.style.overflow).toBe('hidden');
-
-    d.setState({
-      visible: false,
-      visible2: false,
-    })
-    jest.runAllTimers();
-    d.update();
-
-    expect(document.body.style.overflow).toBe('scroll');
-
-    d.setState({
-      visible: true,
-    })
-    jest.runAllTimers();
-    d.update();
-    expect(document.body.style.overflow).toBe('hidden');
+  it('afterClose', () => {
+    const afterClose = jest.fn();
 
-    d.setState({
-      visible: false,
-      visible2: true,
-    })
+    const wrapper = mount(<Dialog afterClose={afterClose} visible />);
     jest.runAllTimers();
-    d.update();
-    expect(document.body.style.overflow).toBe('hidden');
 
-    d.setState({
-      visible: false,
-      visible2: false,
-    })
+    wrapper.setProps({ visible: false });
     jest.runAllTimers();
-    d.update();
-    expect(document.body.style.overflow).toBe('scroll');
-    d.unmount();
-  });
 
-  it('afterClose', () => {
-    const afterCloseMock = jest.fn();
-    const d = mount(
-      <DialogWrap afterClose={afterCloseMock}>
-        <div>afterClose</div>
-      </DialogWrap>,
-    );
-    d.setState({ visible: true });
-    jest.runAllTimers();
-    d.update();
-    d.setState({ visible: false });
-    jest.runAllTimers();
-    d.update();
-    expect(afterCloseMock).toHaveBeenCalledTimes(1);
+    expect(afterClose).toHaveBeenCalledTimes(1);
   });
 
   it('zIndex', () => {
-    const d = mount(<DialogWrap zIndex={1000} />);
-    d.setState({ visible: true });
-    jest.runAllTimers();
-    d.update();
-    expect(d.find('.rc-dialog-wrap').props().style.zIndex).toBe(1000);
+    const wrapper = mount(<Dialog visible zIndex={903} />);
+    expect(wrapper.find('.rc-dialog-wrap').props().style.zIndex).toBe(903);
   });
 
   it('should show dialog when initialize dialog, given forceRender and visible is true', () => {
@@ -416,25 +296,37 @@ describe('dialog', () => {
       }
     }
 
-    const d = mount(
+    const wrapper = mount(
       <DialogWrapTest visible forceRender>
         <div>Show dialog with forceRender and visible is true</div>
       </DialogWrapTest>,
     );
     jest.runAllTimers();
-    d.update();
-    expect(d.find('.rc-dialog-wrap').props().style.display).toEqual(null);
+    wrapper.update();
+    expect(wrapper.find('.rc-dialog-wrap').props().style.display).toEqual(null);
   });
 
   it('modalRender', () => {
     const modalRender = mount(
-      <DialogWrap modalRender={node => cloneElement(node, { ...node.props, style: { background: '#1890ff' }})}>
-      </DialogWrap>
+      <Dialog
+        visible
+        modalRender={node =>
+          cloneElement(node, { ...node.props, style: { background: '#1890ff' } })
+        }
+      />,
     );
-    modalRender.setState({ visible: true });
-    jest.runAllTimers();
-    modalRender.update();
     expect(modalRender.find('.rc-dialog-content').props().style.background).toEqual('#1890ff');
-    modalRender.unmount();
+  });
+
+  describe('size should work', () => {
+    it('width', () => {
+      const wrapper = mount(<Dialog visible width={1128} />);
+      expect(wrapper.find('.rc-dialog').props().style.width).toEqual(1128);
+    });
+
+    it('height', () => {
+      const wrapper = mount(<Dialog visible height={903} />);
+      expect(wrapper.find('.rc-dialog').props().style.height).toEqual(903);
+    });
   });
 });
diff --git a/tests/scroll.spec.tsx b/tests/scroll.spec.tsx
new file mode 100644
index 00000000..85054fd3
--- /dev/null
+++ b/tests/scroll.spec.tsx
@@ -0,0 +1,91 @@
+/* eslint-disable react/no-render-return-value, max-classes-per-file, func-names, no-console */
+import React from 'react';
+import { mount } from 'enzyme';
+import Dialog from '../src';
+
+/**
+ * Since overflow scroll test need a clear env which may affect by other test.
+ * Use a clean env instead.
+ */
+describe('Dialog.Scroll', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('Single Dialog body overflow set correctly', () => {
+    const wrapper = mount(<Dialog />, { attachTo: document.body });
+    document.body.style.overflow = 'scroll';
+
+    wrapper.setProps({ visible: true });
+    jest.runAllTimers();
+    wrapper.update();
+    expect(document.body.style.overflow).toBe('hidden');
+
+    wrapper.setProps({ visible: false });
+    jest.runAllTimers();
+    wrapper.update();
+    expect(document.body.style.overflow).toBe('scroll');
+
+    wrapper.unmount();
+  });
+
+  it('Multiple Dialog body overflow set correctly', () => {
+    document.body.style.overflow = 'scroll';
+
+    const Demo = ({ visible = false, visible2 = false, ...restProps }) => (
+      <div>
+        <Dialog {...restProps} visible={visible} />
+        <Dialog {...restProps} visible={visible2} />
+      </div>
+    );
+
+    const wrapper = mount(<Demo />, { attachTo: document.body });
+
+    expect(wrapper.find('.rc-dialog').length).toBe(0);
+
+    wrapper.setProps({ visible: true });
+    jest.runAllTimers();
+
+    expect(wrapper.find('div.rc-dialog').length).toBe(1);
+    expect(document.body.style.overflow).toBe('hidden');
+
+    wrapper.setProps({ visible2: true });
+    jest.runAllTimers();
+
+    expect(wrapper.find('div.rc-dialog').length).toBe(2);
+    expect(document.body.style.overflow).toBe('hidden');
+
+    wrapper.setProps({
+      visible: false,
+      visible2: false,
+    });
+    jest.runAllTimers();
+
+    expect(document.body.style.overflow).toBe('scroll');
+
+    wrapper.setProps({
+      visible: true,
+    });
+    jest.runAllTimers();
+    expect(document.body.style.overflow).toBe('hidden');
+
+    wrapper.setProps({
+      visible: false,
+      visible2: true,
+    });
+    jest.runAllTimers();
+    expect(document.body.style.overflow).toBe('hidden');
+
+    wrapper.setProps({
+      visible: false,
+      visible2: false,
+    });
+    jest.runAllTimers();
+    expect(document.body.style.overflow).toBe('scroll');
+    wrapper.unmount();
+  });
+});
diff --git a/tests/setup.js b/tests/setup.js
index 4c18e28f..9d51ef44 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -1,5 +1,19 @@
+/* eslint-disable no-console */
 global.requestAnimationFrame = cb => setTimeout(cb, 0);
 
+const originError = console.error;
+const ignoreList = [
+  'Rendering components directly into document.body',
+  'Warning: unmountComponentAtNode():',
+];
+console.error = (...args) => {
+  if (ignoreList.some(str => args[0].includes(str))) {
+    return;
+  }
+
+  originError(...args);
+};
+
 const Enzyme = require('enzyme');
 const Adapter = require('enzyme-adapter-react-16');
 
diff --git a/tests/util.spec.tsx b/tests/util.spec.tsx
new file mode 100644
index 00000000..d136d099
--- /dev/null
+++ b/tests/util.spec.tsx
@@ -0,0 +1,62 @@
+import { getMotionName, offset } from '../src/util';
+
+describe('Dialog.Util', () => {
+  describe('offset', () => {
+    it('window do not have size', () => {
+      const window = {
+        document: {
+          documentElement: {
+            scrollTop: 1128,
+            scrollLeft: 903,
+          },
+        },
+      };
+
+      const element = {
+        ownerDocument: {
+          parentWindow: window,
+        },
+        getBoundingClientRect: () => ({ left: 0, top: 0 }),
+      } as any;
+
+      expect(offset(element)).toEqual({
+        left: 903,
+        top: 1128,
+      });
+    });
+
+    it('window & document do not have size', () => {
+      const window = {
+        document: {
+          documentElement: {},
+          body: {
+            scrollTop: 1128,
+            scrollLeft: 903,
+          },
+        },
+      };
+
+      const element = {
+        ownerDocument: {
+          parentWindow: window,
+        },
+        getBoundingClientRect: () => ({ left: 0, top: 0 }),
+      } as any;
+
+      expect(offset(element)).toEqual({
+        left: 903,
+        top: 1128,
+      });
+    });
+  });
+
+  describe('getMotionName', () => {
+    it('transitionName', () => {
+      expect(getMotionName('test', 'transition', 'animation')).toEqual('transition');
+    });
+
+    it('animation', () => {
+      expect(getMotionName('test', null, 'animation')).toEqual('test-animation');
+    });
+  });
+});
diff --git a/typings/custom.d.ts b/typings/custom.d.ts
deleted file mode 100644
index 55d05e1a..00000000
--- a/typings/custom.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-declare module "rc-util/lib/KeyCode" {
-  const Ret: {ESC:any;TAB:any;};
-  export default Ret;
-}
-
-declare module "rc-animate" {
-  const Ret: any;
-  export default Ret;
-}