解决iframe加载页面出现白屏闪烁问题

解决方法:

在这个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)
    }


版权声明:本文为weixin_42819349原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。