attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 页面卡片过渡

Browse Source
This commit is contained in:
wf 2024-05-07 13:43:59 +08:00
parent 07e377fa8f
commit 70a5f49275
2 changed files with 87 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/main-transition/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<Transition :name="transitionPage === 'fadeIn' ? 'fadeInOut' : 'cardInOut'" mode="out-in" appear> <Transition :name="transitionPage" mode="out-in" appear>
<!-- 向内传递插槽内容 --> <!-- 向内传递插槽内容 -->
<slot></slot> <slot></slot>
</Transition> </Transition>

104
src/style/global-transition.scss
View File

@ -4,11 +4,18 @@
/* 轻过渡 */ /* 轻过渡 */
// 进入 // 进入
.fadeInOut-enter-active { .fadeInOut-enter-active {
-webkit-animation: slide-enter-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation: slide-enter-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation: slide-enter-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
} }
// 离开 @-webkit-keyframes slide-enter-right {
.fadeInOut-leave-active { 0% {
animation: slide-leave-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
} }
@keyframes slide-enter-right { @keyframes slide-enter-right {
0% { 0% {
@ -20,6 +27,21 @@
transform: translateX(0); transform: translateX(0);
} }
} }
// 离开
.fadeInOut-leave-active {
-webkit-animation: slide-leave-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation: slide-leave-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@-webkit-keyframes slide-leave-right {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
@keyframes slide-leave-right { @keyframes slide-leave-right {
0% { 0% {
opacity: 1; opacity: 1;
@ -34,29 +56,75 @@
/* 卡片 */ /* 卡片 */
// 进入 // 进入
.cardInOut-enter-active { .cardInOut-enter-active {
animation: slide-in-bck-center 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; -webkit-animation: swing-in-top-fwd 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: swing-in-top-fwd 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
@keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
} }
// 离开 // 离开
.cardInOut-leave-active { .cardInOut-leave-active {
animation: slide-out-bck-center 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; -webkit-animation: swing-out-top-bck 0.25s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
animation: swing-out-top-bck 0.25s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
} }
@keyframes slide-in-bck-center { @-webkit-keyframes swing-out-top-bck {
0% { 0% {
transform: translateZ(600px); -webkit-transform: rotateX(0deg);
opacity: 0; transform: rotateX(0deg);
} -webkit-transform-origin: top;
100% { transform-origin: top;
transform: translateZ(0);
opacity: 1;
}
}
@keyframes slide-out-bck-center {
0% {
transform: translateZ(0);
opacity: 1; opacity: 1;
} }
100% { 100% {
transform: translateZ(-1100px); -webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
}
@keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
100% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0; opacity: 0;
} }
} }