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>
<Transition :name="transitionPage === 'fadeIn' ? 'fadeInOut' : 'cardInOut'" mode="out-in" appear>
<Transition :name="transitionPage" mode="out-in" appear>
<!-- 向内传递插槽内容 -->
<slot></slot>
</Transition>

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

@ -4,11 +4,18 @@
/* 轻过渡 */
// 进入
.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;
}
// 离开
.fadeInOut-leave-active {
animation: slide-leave-right 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
@-webkit-keyframes slide-enter-right {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slide-enter-right {
0% {
@ -20,6 +27,21 @@
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 {
0% {
opacity: 1;
@ -34,29 +56,75 @@
/* 卡片 */
// 进入
.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 {
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% {
transform: translateZ(600px);
opacity: 0;
}
100% {
transform: translateZ(0);
opacity: 1;
}
}
@keyframes slide-out-bck-center {
0% {
transform: translateZ(0);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
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;
}
}