diff --git a/docs/.vitepress/vitepress/index.ts b/docs/.vitepress/vitepress/index.ts
index cdb459ee2a..a90c0f00c2 100644
--- a/docs/.vitepress/vitepress/index.ts
+++ b/docs/.vitepress/vitepress/index.ts
@@ -1,5 +1,7 @@
 import 'normalize.css'
-import 'element-plus/dist/index.css'
+// import 'element-plus/dist/index.css'
+// for dev
+import '../../../packages/theme-chalk/src/index.scss'
 import './styles/app.scss'
 
 import VPApp from './components/vp-app.vue'
diff --git a/packages/components/drawer/src/index.vue b/packages/components/drawer/src/index.vue
index fe0c441030..0517b10525 100644
--- a/packages/components/drawer/src/index.vue
+++ b/packages/components/drawer/src/index.vue
@@ -19,7 +19,7 @@
           aria-modal="true"
           aria-labelledby="el-drawer__title"
           :aria-label="title"
-          :class="['el-drawer', direction, customClass]"
+          :class="['el-drawer', direction, visible && 'open', customClass]"
           :style="
             isHorizontal ? 'width: ' + drawerSize : 'height: ' + drawerSize
           "
diff --git a/packages/theme-chalk/src/drawer.scss b/packages/theme-chalk/src/drawer.scss
index 61d8e2a56f..87e1b653e1 100644
--- a/packages/theme-chalk/src/drawer.scss
+++ b/packages/theme-chalk/src/drawer.scss
@@ -2,73 +2,6 @@
 @import 'mixins/var';
 @import 'common/var';
 
-@keyframes #{$namespace}-drawer-fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@mixin drawer-animation($direction) {
-  @keyframes #{$direction}-drawer-animation {
-    0% {
-      @if $direction == ltr {
-        transform: translate(0px, 0px);
-      }
-
-      @if $direction == rtl {
-        transform: translate(0px, 0px);
-      }
-
-      @if $direction == ttb {
-        transform: translate(0px, 0px);
-      }
-
-      @if $direction == btt {
-        transform: translate(0px, 0px);
-      }
-    }
-
-    100% {
-      @if $direction == ltr {
-        transform: translate(-100%, 0px);
-      }
-
-      @if $direction == rtl {
-        transform: translate(100%, 0px);
-      }
-
-      @if $direction == ttb {
-        transform: translate(0px, -100%);
-      }
-
-      @if $direction == btt {
-        transform: translate(0px, 100%);
-      }
-    }
-  }
-}
-
-@mixin animation-in($direction) {
-  &.#{$direction} {
-    animation: #{$direction}-drawer-animation var(--el-transition-duration) linear
-      reverse;
-  }
-}
-
-@mixin animation-out($direction) {
-  &.#{$direction} {
-    animation: #{$direction}-drawer-animation var(--el-transition-duration) linear;
-  }
-}
-
-@include drawer-animation(rtl);
-@include drawer-animation(ltr);
-@include drawer-animation(ttb);
-@include drawer-animation(btt);
-
 $directions: rtl, ltr, ttb, btt;
 
 @include b(drawer) {
@@ -85,13 +18,11 @@ $directions: rtl, ltr, ttb, btt;
     0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
   overflow: hidden;
 
-  @each $direction in $directions {
-    .#{$namespace}-drawer-fade-enter-active & {
-      @include animation-in($direction);
-    }
+  transition: all var(--el-transition-duration);
 
-    .#{$namespace}-drawer-fade-leave-active & {
-      @include animation-out($direction);
+  @each $direction in $directions {
+    .#{$direction} {
+      transform: translate(0, 0);
     }
   }
 
@@ -130,6 +61,7 @@ $directions: rtl, ltr, ttb, btt;
 
   &__body {
     flex: 1;
+    padding: var(--el-drawer-padding-primary);
     & > * {
       box-sizing: border-box;
     }
@@ -166,12 +98,51 @@ $directions: rtl, ltr, ttb, btt;
   }
 }
 
-.#{$namespace}-drawer-fade-enter-active {
-  animation: #{$namespace}-drawer-fade-in var(--el-transition-duration);
-  overflow: hidden !important;
-}
+.#{$namespace}-drawer-fade {
+  &-enter-active,
+  &-leave-active {
+    transition: all var(--el-transition-duration);
+  }
 
-.#{$namespace}-drawer-fade-leave-active {
-  overflow: hidden !important;
-  animation: #{$namespace}-drawer-fade-in var(--el-transition-duration) reverse;
+  &-enter-from,
+  &-enter-active,
+  &-enter-to,
+  &-leave-from,
+  &-leave-active,
+  &-leave-to {
+    overflow: hidden !important;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-to,
+  &-leave-from {
+    opacity: 1;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    @each $direction in $directions {
+      .#{$direction} {
+        @if $direction == ltr {
+          transform: translateX(-100%);
+        }
+
+        @if $direction == rtl {
+          transform: translateX(100%);
+        }
+
+        @if $direction == ttb {
+          transform: translateY(-100%);
+        }
+
+        @if $direction == btt {
+          transform: translateY(100%);
+        }
+      }
+    }
+  }
 }