diff --git a/example/src/components/HelloWord.vue b/example/src/components/HelloWord.vue
index 9162f4f0c9150c6e44bf13c179628cc168cce3b3..1d1b46a3dbe11ced74bbfb15ecb5a0c232910f38 100644
--- a/example/src/components/HelloWord.vue
+++ b/example/src/components/HelloWord.vue
@@ -2,7 +2,7 @@
   <lay-layer title="false" v-model="visible" maxmin resize>内容</lay-layer>
   <lay-layer v-model="drawerVisible" type="drawer">
     <button @click="onChangeInteriorDrawerVisible" style="margin:10px;">内部抽屉</button>
-    <lay-layer v-model="interiorDrawerVisible" type="drawer" area="200px">内部抽屉内容</lay-layer>
+    <lay-layer v-model="interiorDrawerVisible" type="drawer" area="25%">内部抽屉内容</lay-layer>
   </lay-layer>
   <button @click="onChangeVisible">组件</button>
   <button @click="openModal">函数</button>
diff --git a/src/component/index.vue b/src/component/index.vue
index fea8d3c1c3cdab1605c9345acd5700b465f7d6a7..45967222a72c4711fdfc1b88928a5f826281d23f 100644
--- a/src/component/index.vue
+++ b/src/component/index.vue
@@ -102,7 +102,7 @@ const max: Ref<boolean> = ref(false);
 const min: Ref<boolean> = ref(false);
 const type: number = calculateType(props.type);
 const area: Ref<string[]> = props.type != "drawer" ? ref(calculateArea(props.area)) : ref(calculateDrawerArea(props.offset, props.area));
-const offset: Ref<string[]> = ref(calculateOffset(props.offset, area, props.type));
+const offset: Ref<string[]> = ref(calculateOffset(props.offset, area.value, props.type));
 const contentHeight = ref(calculateContent(area.value[1], props.btn, type));
 const index: Ref<number | Function> = ref(props.zIndex);
 const visible: Ref<boolean> = ref(false);
@@ -124,6 +124,9 @@ const _l: Ref<string> = ref(offset.value[1]);
 const firstOpenDelayCalculation = function () {
   setTimeout(() => {
     area.value = getArea(layero.value);
+    if (props.type === "drawer"){
+      area.value = calculateDrawerArea(props.offset, props.area)
+    }
     offset.value = calculateOffset(props.offset, area.value, props.type);
     w.value = area.value[0];
     h.value = area.value[1];
diff --git a/src/theme/index.css b/src/theme/index.css
index ee0ff21734493acb9e67732c11c4c573a2d4718e..d2fda8291c6322f9e82fb873edbadfddc482a646 100644
--- a/src/theme/index.css
+++ b/src/theme/index.css
@@ -99,14 +99,21 @@ html #layuicss-layer {
     -webkit-animation-duration: .3s;
     animation-duration: .3s
 }
+
 /* 抽屉开始 */
+.layer-drawer-anim{
+    -webkit-animation-duration: .3s;
+    animation-duration: .3s;
+    -webkit-animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
+    animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
+}
 /* right to left */
 @keyframes layer-rl {
     from {
         -webkit-transform: translate3d(100%, 0, 0);
         -ms-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
-        opacity: 0;
+        opacity: 1;
         
     }
     to {
@@ -122,7 +129,7 @@ html #layuicss-layer {
         -webkit-transform: translate3d(100%, 0, 0);
         -ms-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
-        opacity: 0;
+        opacity: 1;
        
     }
     to {
@@ -136,7 +143,6 @@ html #layuicss-layer {
 .layer-anim-rl {
     -webkit-animation-name: layer-rl;
     animation-name: layer-rl;
-     /* animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1); */
 }
 
 /* right to left close */
@@ -145,7 +151,6 @@ html #layuicss-layer {
         -webkit-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
-        
     }
     to {
         -webkit-transform: translate3d(100%, 0, 0);
@@ -171,7 +176,6 @@ html #layuicss-layer {
 .layer-anim-rl-close {
     -webkit-animation-name: layer-rl-close;
     animation-name: layer-rl-close;
-     /* animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1); */
 }
 /* left to right */
 @-webkit-keyframes layer-lr {
@@ -179,7 +183,7 @@ html #layuicss-layer {
         -webkit-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
-        opacity: 0
+        opacity: 1
     }
     to {
         -webkit-transform: translate3d(-100%, 0, 0);
@@ -194,7 +198,7 @@ html #layuicss-layer {
         -webkit-transform: translate3d(-100%, 0, 0);
         -ms-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0);
-        opacity: 0
+        opacity: 1
     }
     to {
         -webkit-transform: translate3d(0, 0, 0);
@@ -245,7 +249,7 @@ html #layuicss-layer {
         -webkit-transform: translate3d(0, -100%, 0);
         -ms-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
-        opacity: 0;
+        opacity: 1;
         animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1);
     }
     to {
@@ -262,7 +266,7 @@ html #layuicss-layer {
         -webkit-transform: translate3d(0, -100%, 0);
         -ms-transform: translate3d(0, -100%, 0);
         transform: translate3d(0, -100%, 0);
-        opacity: 0;
+        opacity: 1;
         animation-timing-function:cubic-bezier(0.7, 0.3, 0.1, 1);
     }
     to {
@@ -315,7 +319,7 @@ html #layuicss-layer {
         -webkit-transform: translate3d(0, 100%, 0);
         -ms-transform: translate3d(0, 100%, 0);
         transform: translate3d(0, 100%, 0);
-        opacity: 0
+        opacity: 1
     }
     to {
         -webkit-transform: translate3d(0, 0, 0);
@@ -330,7 +334,7 @@ html #layuicss-layer {
         -webkit-transform: translate3d(0, 100%, 0);
         -ms-transform: translate3d(0, 100%, 0);
         transform: translate3d(0, 100%, 0);
-        opacity: 0
+        opacity: 1
     }
     to {
         -webkit-transform: translate3d(0, 0, 0);
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 4e6fcfc44b5ebf1f60b5c510ebd1c9fea90919d9..985e2948b406de018e4db5d983dfa4eb2a2f11a4 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -178,7 +178,7 @@ export function updateMinArrays(id: string, state: Boolean) {
 
 // 抽屉动画类
 export function getDrawerAnimationClass(offset: any,isClose: boolean = false){
-  const prefix = "layer-anim layer-anim";
+  const prefix = "layer-drawer-anim layer-anim";
   let suffix = "rl";
   if(offset === "l"){
     suffix = "lr";
@@ -193,12 +193,12 @@ export function getDrawerAnimationClass(offset: any,isClose: boolean = false){
 }
 
 // 抽屉宽/高
-export function calculateDrawerArea(offset: any, drawerArea: string[] | string = "350px"){
+export function calculateDrawerArea(offset: any, drawerArea: string[] | string = "30%"){
   if(drawerArea instanceof Array){
     return drawerArea;
   }
   if(drawerArea === "auto"){
-    drawerArea = "350px";
+    drawerArea = "30%";
   }
   if(offset === "l" || offset === "r"){
     return [drawerArea, "100%"];