Modify documents and adjust demos

components/drawer/demo/basic-left.md

@@ -0,0 +1,68 @@
+---
+order: 1
+title:
+  zh-CN: 左侧滑出
+  en-US: Left Silder
+---
+
+## zh-CN
+
+基础抽屉，点击触发按钮抽屉从左滑出，点击遮罩区关闭
+
+## en-US
+
+Basic drawer.
+
+```jsx
+import { Drawer, Button } from 'antd';
+
+class App extends React.Component {
+  state = { visible: false };
+  toogerHotjar = () => {
+    const hotjar = document.getElementById('_hj_feedback_container');
+    if (hotjar.style.display === 'none') {
+      hotjar.style.display = '';
+    } else {
+      hotjar.style.display = 'none';
+    }
+  };
+  showDrawer = () => {
+    this.toogerHotjar();
+    this.setState({
+      visible: true,
+    });
+  };
+  onClose = () => {
+    this.setState(
+      {
+        visible: false,
+      },
+      () => {
+        this.toogerHotjar();
+      }
+    );
+  };
+  render() {
+    return (
+      <div>
+        <Button type="primary" onClick={this.showDrawer}>
+          Open
+        </Button>
+        <Drawer
+          title="Basic Drawer"
+          placement="left"
+          closable={false}
+          onClose={this.onClose}
+          visible={this.state.visible}
+        >
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </Drawer>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+```

components/drawer/demo/basic-right.md

@@ -18,15 +18,29 @@ import { Drawer, Button } from 'antd';
 
 class App extends React.Component {
   state = { visible: false };
+  toogerHotjar = () => {
+    const hotjar = document.getElementById('_hj_feedback_container');
+    if (hotjar.style.display === 'none') {
+      hotjar.style.display = '';
+    } else {
+      hotjar.style.display = 'none';
+    }
+  };
   showDrawer = () => {
+    this.toogerHotjar();
     this.setState({
       visible: true,
     });
   };
   onClose = () => {
-    this.setState({
-      visible: false,
-    });
+    this.setState(
+      {
+        visible: false,
+      },
+      () => {
+        this.toogerHotjar();
+      }
+    );
   };
   render() {
     return (

components/drawer/demo/from-drawer.md

@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 3
 title:
   zh-CN: 对象编辑
   en-US: Edit item in drawer
@@ -20,15 +20,29 @@ const { Option } = Select;
 
 class App extends React.Component {
   state = { visible: false };
+  toogerHotjar = () => {
+    const hotjar = document.getElementById('_hj_feedback_container');
+    if (hotjar.style.display === 'none') {
+      hotjar.style.display = '';
+    } else {
+      hotjar.style.display = 'none';
+    }
+  };
   showDrawer = () => {
+    this.toogerHotjar();
     this.setState({
-      visible: !this.state.visible,
+      visible: true,
     });
   };
   onClose = () => {
-    this.setState({
-      visible: false,
-    });
+    this.setState(
+      {
+        visible: false,
+      },
+      () => {
+        this.toogerHotjar();
+      }
+    );
   };
   render() {
     const { getFieldDecorator } = this.props.form;

components/drawer/demo/user-profile.md

@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 4
 title:
   zh-CN: 信息预览抽屉
   en-US: Preview drawer
@@ -9,7 +9,6 @@ title:
 
 需要快速预览对象概要时使用，点击遮罩区关闭。
 
-
 ## en-US
 
 Use when you need to quickly preview the outline of the object. Such as list item preview.
@@ -49,11 +48,11 @@ const DescriptionItem = ({ title, content }) => {
   );
 };
 
-class App extends React.Component {
+class MiniDrawer extends React.Component {
   state = { visible: false };
   showDrawer = () => {
     this.setState({
-      visible: !this.state.visible,
+      visible: true,
     });
   };
   onClose = () => {
@@ -61,6 +60,59 @@ class App extends React.Component {
       visible: false,
     });
   };
+  render() {
+    return (
+      <div>
+        <a onClick={this.showDrawer}>View Profile</a>
+        <Drawer
+          width={640}
+          placement="right"
+          closable={false}
+          onClose={this.onClose}
+          visible={this.state.visible}
+        >
+          <p style={{ ...pStyle, marginBottom: 24 }}>User Profile</p>
+          <p style={pStyle}>Personal</p>
+          <Row>
+            <Col span={12}>
+              <DescriptionItem title="Full Name" content="Lily" />{' '}
+            </Col>
+            <Col span={12}>
+              <DescriptionItem title="Account" content="AntDesign@example.com" />
+            </Col>
+          </Row>
+        </Drawer>
+      </div>
+    );
+  }
+}
+
+class App extends React.Component {
+  state = { visible: false };
+  toogerHotjar = () => {
+    const hotjar = document.getElementById('_hj_feedback_container');
+    if (hotjar.style.display === 'none') {
+      hotjar.style.display = '';
+    } else {
+      hotjar.style.display = 'none';
+    }
+  };
+  showDrawer = () => {
+    this.toogerHotjar();
+    this.setState({
+      visible: true,
+    });
+  };
+  onClose = () => {
+    this.setState(
+      {
+        visible: false,
+      },
+      () => {
+        this.toogerHotjar();
+      }
+    );
+  };
   render() {
     return (
       <div>
@@ -95,6 +147,7 @@ class App extends React.Component {
         >
           <p style={{ ...pStyle, marginBottom: 24 }}>User Profile</p>
           <p style={pStyle}>Personal</p>
+          <MiniDrawer />
           <Row>
             <Col span={12}>
               <DescriptionItem title="Full Name" content="Lily" />{' '}

components/drawer/style/drawer.less

@@ -54,7 +54,6 @@
     .@{dawer-prefix-cls} {
       &-mask {
         opacity: 0.3;
-        display: block;
       }
     }
   }
@@ -73,6 +72,7 @@
     border: 0;
     background-clip: padding-box;
     box-shadow: @shadow-2;
+    z-index: 1;
   }
 
   &-close {
@@ -131,22 +131,16 @@
     word-wrap: break-word;
   }
 
-  &.zoom-enter,
-  &.zoom-appear {
-    animation-duration: @animation-duration-slow;
-    transform: none; // reset scale avoid mousePosition bug
-    opacity: 0;
-  }
-
   &-mask {
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
-    display: none;
-    background-color: @modal-mask-bg; // lesshint duplicateProperty: false
+    opacity: 0;
+    background-color: @modal-mask-bg;
     height: 100%;
+    transition: opacity .3s  @ease-in-out-circ;
     filter: ~"alpha(opacity=50)";
   }