diff --git a/components/drawer/__tests__/Drawer.test.js b/components/drawer/__tests__/Drawer.test.js
index 379f443160..f366715c9c 100644
--- a/components/drawer/__tests__/Drawer.test.js
+++ b/components/drawer/__tests__/Drawer.test.js
@@ -55,12 +55,12 @@ describe('Drawer', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('wrapClassName is test_drawer', () => {
+  it('className is test_drawer', () => {
     const wrapper = render(
       <Drawer
         destroyOnClose
         visible={false}
-        wrapClassName="test_drawer"
+        className="test_drawer"
         getContainer={false}
       >
         Here is content of Drawer
diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
index 3c4721abfb..dd1d0096b4 100644
--- a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Drawer closable is false 1`] = `
+exports[`Drawer className is test_drawer 1`] = `
 <div
   class=""
 >
   <div
-    class="ant-drawer ant-drawer-right"
+    class="ant-drawer ant-drawer-right test_drawer"
   >
     <div
       class="ant-drawer-mask"
@@ -19,8 +19,16 @@ exports[`Drawer closable is false 1`] = `
       >
         <div
           class="ant-drawer-wrapper-body"
-          style="overflow:auto;height:100%"
+          style="overflow:auto;height:100%;opacity:0;transition:opacity .3s"
         >
+          <button
+            aria-label="Close"
+            class="ant-drawer-close"
+          >
+            <span
+              class="ant-drawer-close-x"
+            />
+          </button>
           <div
             class="ant-drawer-body"
           >
@@ -33,7 +41,7 @@ exports[`Drawer closable is false 1`] = `
 </div>
 `;
 
-exports[`Drawer destroyOnClose is true 1`] = `
+exports[`Drawer closable is false 1`] = `
 <div
   class=""
 >
@@ -52,16 +60,8 @@ exports[`Drawer destroyOnClose is true 1`] = `
       >
         <div
           class="ant-drawer-wrapper-body"
-          style="overflow:auto;height:100%;opacity:0;transition:opacity .3s"
+          style="overflow:auto;height:100%"
         >
-          <button
-            aria-label="Close"
-            class="ant-drawer-close"
-          >
-            <span
-              class="ant-drawer-close-x"
-            />
-          </button>
           <div
             class="ant-drawer-body"
           >
@@ -74,7 +74,7 @@ exports[`Drawer destroyOnClose is true 1`] = `
 </div>
 `;
 
-exports[`Drawer have a title 1`] = `
+exports[`Drawer destroyOnClose is true 1`] = `
 <div
   class=""
 >
@@ -93,17 +93,8 @@ exports[`Drawer have a title 1`] = `
       >
         <div
           class="ant-drawer-wrapper-body"
-          style="overflow:auto;height:100%"
+          style="overflow:auto;height:100%;opacity:0;transition:opacity .3s"
         >
-          <div
-            class="ant-drawer-header"
-          >
-            <div
-              class="ant-drawer-title"
-            >
-              Test Title
-            </div>
-          </div>
           <button
             aria-label="Close"
             class="ant-drawer-close"
@@ -124,7 +115,7 @@ exports[`Drawer have a title 1`] = `
 </div>
 `;
 
-exports[`Drawer render correctly 1`] = `
+exports[`Drawer have a title 1`] = `
 <div
   class=""
 >
@@ -136,7 +127,7 @@ exports[`Drawer render correctly 1`] = `
     />
     <div
       class="ant-drawer-content-wrapper"
-      style="transform:translateX(100%);width:400px"
+      style="transform:translateX(100%);width:256px"
     >
       <div
         class="ant-drawer-content"
@@ -145,6 +136,15 @@ exports[`Drawer render correctly 1`] = `
           class="ant-drawer-wrapper-body"
           style="overflow:auto;height:100%"
         >
+          <div
+            class="ant-drawer-header"
+          >
+            <div
+              class="ant-drawer-title"
+            >
+              Test Title
+            </div>
+          </div>
           <button
             aria-label="Close"
             class="ant-drawer-close"
@@ -165,26 +165,26 @@ exports[`Drawer render correctly 1`] = `
 </div>
 `;
 
-exports[`Drawer wrapClassName is test_drawer 1`] = `
+exports[`Drawer render correctly 1`] = `
 <div
   class=""
 >
   <div
-    class="ant-drawer ant-drawer-right test_drawer"
+    class="ant-drawer ant-drawer-right"
   >
     <div
       class="ant-drawer-mask"
     />
     <div
       class="ant-drawer-content-wrapper"
-      style="transform:translateX(100%);width:256px"
+      style="transform:translateX(100%);width:400px"
     >
       <div
         class="ant-drawer-content"
       >
         <div
           class="ant-drawer-wrapper-body"
-          style="overflow:auto;height:100%;opacity:0;transition:opacity .3s"
+          style="overflow:auto;height:100%"
         >
           <button
             aria-label="Close"