Rapidly Change Route
<style>
.page-enter-active {
animation: page-fade-in 0.3s ease-out;
}
.page-leave-active {
animation: page-fade-out 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
@keyframes page-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes page-fade-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
}
}
.layout-enter-active {
transition: all 0.3s ease-out;
}
.layout-leave-active {
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.layout-enter-from,
.layout-leave-to {
/transform: translateY(-20px);/
opacity: 0;
}
</style>
.page-enter-active {
animation: page-fade-in 0.3s ease-out;
}
.page-leave-active {
animation: page-fade-out 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
@keyframes page-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes page-fade-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
}
}
.layout-enter-active {
transition: all 0.3s ease-out;
}
.layout-leave-active {
transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.layout-enter-from,
.layout-leave-to {
/transform: translateY(-20px);/
opacity: 0;
}
</style>
