解决方法:
在这个css文件里面添加以下代码,你会发现,原来页面切换可以这样如丝般顺滑
body{
opacity: 0;
animation: page-fade-in 1s forwards;
}
@keyframes page-fade-in {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
当然如果你想更逗比一点,那就引入animate.css,挑几个逗比的入场动画,或者自己写也行。
@keyframes page-scale-up {
0% {
opacity: 0;
transform: scale(.9)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes page-scale-down {
0% {
opacity: 0;
transform: scale(1.8)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes page-slide-top {
0% {
opacity: 0;
transform: translateY(-100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes page-slide-bottom {
0% {
opacity: 0;
transform: translateY(100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes page-slide-left {
0% {
opacity: 0;
transform: translateX(-100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@keyframes page-slide-right {
0% {
opacity: 0;
transform: translateX(100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}