add animation for page change

This commit is contained in:
LouisLam
2021-08-20 02:37:59 +08:00
parent 209e44c2e1
commit f21937b197
6 changed files with 514 additions and 478 deletions

View File

@@ -183,3 +183,20 @@ h2 {
background-color: $dark-bg;
}
}
/*
* Transitions
*/
// page-change
.slide-fade-enter-active {
transition: all 0.20s $easing-in;
}
.slide-fade-leave-active {
transition: all 0.20s $easing-in;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateY(50px);
opacity: 0;
}

View File

@@ -12,3 +12,7 @@ $dark-font-color2: #020b05;
$dark-bg: #0D1117;
$dark-bg2: #070A10;
$dark-border-color: #1d2634;
$easing-in: cubic-bezier(0.54,0.78,0.55,0.97);
$easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$easing-in-out: cubic-bezier(0.79, 0.14, 0.15, 0.86);