style: Drawer get container (#18167)

* update drawer position and add get-container demo

* fix lint

* update get-container.md

* rm HTMLElement

* update get-container to render-in-current

* fix lint

* update style

* update test

* re form test

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

@@ -156,6 +156,69 @@ exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/drawer/demo/render-in-current.md correctly 1`] = `
+<div
+  style="height:200px;overflow:hidden;position:relative;border:1px solid #ebedf0;border-radius:2px;padding:48px;text-align:center;background:#fafafa"
+>
+  Render in this
+  <div
+    style="margin-top:16px"
+  >
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Open
+      </span>
+    </button>
+  </div>
+  <div
+    class=""
+  >
+    <div
+      class="ant-drawer ant-drawer-right"
+      style="position:absolute"
+      tabindex="-1"
+    >
+      <div
+        class="ant-drawer-mask"
+      />
+      <div
+        class="ant-drawer-content-wrapper"
+        style="transform:translateX(100%);-ms-transform:translateX(100%);width:256px"
+      >
+        <div
+          class="ant-drawer-content"
+        >
+          <div
+            class="ant-drawer-wrapper-body"
+            style="overflow:auto;height:100%"
+          >
+            <div
+              class="ant-drawer-header"
+            >
+              <div
+                class="ant-drawer-title"
+              >
+                Basic Drawer
+              </div>
+            </div>
+            <div
+              class="ant-drawer-body"
+            >
+              <p>
+                Some contents...
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
 <div>
   <div

components/drawer/demo/render-in-current.md

@@ -0,0 +1,71 @@
+---
+order: 2
+title:
+  zh-CN: 渲染在当前 DOM
+  en-US: Render in current dom
+---
+
+## zh-CN
+
+渲染在当前 dom 里。自定义容器，查看 getContainer。
+
+## en-US
+
+Render in current dom. custom container, check getContainer.
+
+```jsx
+import { Drawer, Button } from 'antd';
+
+class App extends React.Component {
+  state = { visible: false };
+
+  showDrawer = () => {
+    this.setState({
+      visible: true,
+    });
+  };
+
+  onClose = () => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  render() {
+    return (
+      <div
+        style={{
+          height: 200,
+          overflow: 'hidden',
+          position: 'relative',
+          border: '1px solid #ebedf0',
+          borderRadius: 2,
+          padding: 48,
+          textAlign: 'center',
+          background: '#fafafa',
+        }}
+      >
+        Render in this
+        <div style={{ marginTop: 16 }}>
+          <Button type="primary" onClick={this.showDrawer}>
+            Open
+          </Button>
+        </div>
+        <Drawer
+          title="Basic Drawer"
+          placement="right"
+          closable={false}
+          onClose={this.onClose}
+          visible={this.state.visible}
+          getContainer={false}
+          style={{ position: 'absolute' }}
+        >
+          <p>Some contents...</p>
+        </Drawer>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+```

components/drawer/style/drawer.less

@@ -11,14 +11,14 @@
   z-index: @zindex-modal;
   width: 0%;
   height: 100%;
-  transition: transform @animation-duration-slow @ease-base-out;
+  transition: transform @animation-duration-slow @ease-base-out, height 0s ease @animation-duration-slow, width 0s ease @animation-duration-slow;
   > * {
     transition: transform @animation-duration-slow @ease-base-out,
       box-shadow @animation-duration-slow @ease-base-out;
   }
 
   &-content-wrapper {
-    position: fixed;
+    position: absolute;
   }
   .@{drawer-prefix-cls}-content {
     width: 100%;
@@ -35,6 +35,7 @@
     }
     &.@{drawer-prefix-cls}-open {
       width: 100%;
+      transition: transform @animation-duration-slow @ease-base-out;
     }
     &.@{drawer-prefix-cls}-open.no-mask {
       width: 0%;
@@ -75,6 +76,7 @@
     }
     &.@{drawer-prefix-cls}-open {
       height: 100%;
+      transition: transform @animation-duration-slow @ease-base-out;
     }
     &.@{drawer-prefix-cls}-open.no-mask {
       height: 0%;
@@ -186,7 +188,7 @@
   }
 
   &-mask {
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     width: 100%;