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

问题描述：

今天维护公司的一个老项目，项目是一个公共页面iframe充当类似vue的router-view,通过这个iframe来切换不同页面。但是在切换或者刷新的时候，会出现白屏闪烁问题，用户体验非常不好！

而且由于项目需要适配2k,4k,8k屏，所以使用了rem单位，而使用rem会导致页面在开始加载的一瞬间会很小，然后突然变大，rem的使用加剧了闪烁幅度；

*由于保密我这里就不录屏了；

解决方法：

相信大家做项目的时候都会创建一个样式初始化文件，对全局标签样式进行统一;

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

赶紧去试试吧~~~~~~~~~~~~~~