vue过渡动画白屏处理

最新推荐文章于 2026-05-30 11:32:04 发布

原创最新推荐文章于 2026-05-30 11:32:04 发布 · 4.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

博客介绍了Vue利用封装组件添加过渡动画效果，给出了官网样式代码。但使用时页面动画会出现瞬间白屏，随后改用新代码解决了白屏问题，并展示了新代码及相关动画关键帧设置。

Vue 提供了 transition 的封装组件，所以在组件离开或者进入的时候可以添加动画效果。下面是官网的一些介绍，详细的文档请查看官网。

根据官网介绍我们写了一下样式，实现过渡动画效果。

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
height: 100%;
will-change: transform;
transition: all 500ms;
position: absolute;
backface-visibility: hidden;
perspective: 1000;
}
.slide-right-enter {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}

但是仔细观察发现页面动画的时候会有一瞬间的白屏。然后改用了以下代码，然后白屏的bug消失了。（白屏是body的颜色，如果body背景色是黑色，那白屏就变为黑屏了）

.router-view {
width: 100%;
height:100%;
position: absolute;
top: 0;
bottom: 0;
margin: 0 auto;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
height: 100%;
will-change: transform;
transition: all 500ms;
position: absolute;
backface-visibility: hidden;
perspective: 1000;
}
.slide-right-enter,.slide-right-enter-active{
animation: bounce-left-in 500ms;
}
.slide-right-leave-active {
animation: bounce-left-out 500ms;
}
.slide-left-enter, .slide-left-enter-active{
animation: bounce-right-in 500ms;
}
.slide-left-leave-active {
animation: bounce-right-out 500ms;
}

@keyframes bounce-right-in {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0px, 0, 0);
}
}
@keyframes bounce-right-out {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
@keyframes bounce-left-in {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0px, 0, 0);
}
}
@keyframes bounce-left-out {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}