fix #11583 #11443

components/drawer/style/drawer.less

@@ -5,17 +5,15 @@
 .@{dawer-prefix-cls} {
   position: fixed;
   top: 0;
-  width: 100%;
-  height: 100%;
   pointer-events: none;
   z-index: @zindex-modal;
-  transition: transform 0.3s @ease-in-out-circ;
+  transition: transform @animation-duration-slow @ease-in-out-circ;
   > * {
-    transition: transform 0.3s @ease-in-out-circ;
+    transition: transform @animation-duration-slow @ease-in-out-circ;
   }
 
   &-content-wrapper {
-    position: absolute;
+    position: fixed;
   }
 
   &-left,
@@ -51,6 +49,8 @@
     .@{dawer-prefix-cls} {
       &-mask {
         opacity: 0.3;
+        animation: antdDrawerFadeIn @animation-duration-slow @ease-in-out-circ;
+        transition: none;
       }
     }
   }
@@ -82,7 +82,7 @@
     font-weight: 700;
     line-height: 1;
     text-decoration: none;
-    transition: color 0.3s;
+    transition: color @animation-duration-slow;
     color: @text-color-secondary;
     outline: 0;
     padding: 0;
@@ -136,7 +136,7 @@
     opacity: 0;
     background-color: @modal-mask-bg;
     height: 100%;
-    transition: opacity 0.3s @ease-in-out-circ;
+    transition: opacity @animation-duration-slow @ease-in-out-circ;
     filter: ~"alpha(opacity=50)";
   }
 
@@ -147,3 +147,12 @@
     }
   }
 }
+
+@keyframes antdDrawerFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.3;
+  }
+}

package.json

@@ -59,7 +59,7 @@
     "rc-checkbox": "~2.1.5",
     "rc-collapse": "~1.9.0",
     "rc-dialog": "~7.2.0",
-    "rc-drawer": "~1.6.2",
+    "rc-drawer": "~1.7.0",
     "rc-dropdown": "~2.2.0",
     "rc-editor-mention": "^1.0.2",
     "rc-form": "^2.1.0",