iframe切换闪烁

在维护公司的一个老项目时，您遇到了一个公共页面iframe在切换或刷新时出现白屏闪烁的问题。为了解决这个问题，您可以尝试使用一些动画效果来改善用户体验。

其中一种方法是使用CSS的动画关键帧（@keyframes）属性来定义页面切换的动画效果。您可以使用以下示例代码来实现一些常见的切换动画效果：

@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) }
}

您可以将以上代码添加到包含iframe的CSS文件中。例如，通过在body元素上应用page-fade-in动画，页面切换时可以实现淡入效果：

body {
opacity: 0;
animation: page-fade-in 1s forwards;
}

@keyframes page-fade-in {
0% { opacity: 0 }
100% { opacity: 1 }
}

通过添加适当的样式和动画效果，您可以减少iframe切换时的闪烁问题，提升用户体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [解决iframe加载页面出现白屏闪烁问题](https://blog.csdn.net/iVRJay/article/details/94622171)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]