From 4bcc9e32f1fea8054e67bf86b9a118a935c8f547 Mon Sep 17 00:00:00 2001 From: sight <1453017105@qq.com> Date: Fri, 11 Feb 2022 17:20:57 +0800 Subject: [PATCH] =?UTF-8?q?fix(drawer):=201.=E4=BC=98=E5=8C=96=20drawer=20?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E8=A1=A8=E7=8E=B0=EF=BC=8C=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=85=A5=E5=9C=BA=E5=8A=A8=E7=94=BB=E6=9C=AA=E5=9C=A8=E5=B1=8F?= =?UTF-8?q?=E5=B9=95=E8=BE=B9=E7=BC=98=E5=BC=80=E5=A7=8B=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98;=202.=E4=BF=AE=E5=A4=8D=20drawer=20=E7=9A=84=20offset?= =?UTF-8?q?=20=E5=92=8C=20area=20=E8=AE=A1=E7=AE=97=E9=94=99=E8=AF=AF?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=203.=E4=BF=AE=E6=94=B9=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=20area=20=E4=B8=BA=2030%?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/src/components/HelloWord.vue | 2 +- src/component/index.vue | 5 ++++- src/theme/index.css | 26 +++++++++++++++----------- src/utils/index.ts | 6 +++--- 4 files changed, 23 insertions(+), 16 deletions(-) diff --git a/example/src/components/HelloWord.vue b/example/src/components/HelloWord.vue index 9162f4f..1d1b46a 100644 --- a/example/src/components/HelloWord.vue +++ b/example/src/components/HelloWord.vue @@ -2,7 +2,7 @@ 内容 - 内部抽屉内容 + 内部抽屉内容 diff --git a/src/component/index.vue b/src/component/index.vue index fea8d3c..4596722 100644 --- a/src/component/index.vue +++ b/src/component/index.vue @@ -102,7 +102,7 @@ const max: Ref = ref(false); const min: Ref = ref(false); const type: number = calculateType(props.type); const area: Ref = props.type != "drawer" ? ref(calculateArea(props.area)) : ref(calculateDrawerArea(props.offset, props.area)); -const offset: Ref = ref(calculateOffset(props.offset, area, props.type)); +const offset: Ref = ref(calculateOffset(props.offset, area.value, props.type)); const contentHeight = ref(calculateContent(area.value[1], props.btn, type)); const index: Ref = ref(props.zIndex); const visible: Ref = ref(false); @@ -124,6 +124,9 @@ const _l: Ref = 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 ee0ff21..d2fda82 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 4e6fcfc..985e294 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%"]; -- Gitee