vue动画切换出现白屏问题的解决办法

使用animate.css的一些动画的时候，会出现白屏效果，比如

bounceInRight这些

原因是因为

这些效果的作用是，先设置元素偏移到很远的地方，比如

transform: translate3d(-10000px, 0, 0);

然后再一步步进行修正

这个时候在前面的时候，因为位置偏移太远了，所以即使走了一段时间，此时位置依旧是在-999px

导致依旧显示不了。这个时候就可以使用百分比

0% {
transform: translate3d(-100%, 0, 0);
}

这样一开始的偏移就是在屏幕边上了。

但是这个样子有个问题

不管我们设置的是进来的动画还是出去的动画，因为元素被替换 了，所以原来的元素的位置是空白，这个样子就导致了显示效果依旧不行

会出现这个样子的效果

因此我们可以给他再加上一个动画效果，使得他出去的时候也有动画，且时间一致。

但是这个时候，我们会发现效果很诡异。并没有看到我们想要的效果

这个时候我们需要把mode=’out-in’ 去除

再分析原因

我们可以发现有两个动画。并且执行了

但是因为布局的原因。导致了动画被挤下去了

这个时候我们可以使用absolute对路由进行布局，就可以实现无缝切换效果了。

<template>
<p id="app">
<!-- <transition name="fade"
mode="out-in"
leave-active-class="animated bounceOutRight"
enter-active-class="animated bounceInLeft">
<router-view/>
</transition> -->
<transition name="fade"
>
<router-view class="router-view"/>
</transition>
</p>
</template>

<script>
export default {
name: 'App'
}
</script>

<style scoped lang='scss'>
#app {
height: 100%;
width: 100%;
.router-view{
position: absolute;
}
.fade-enter-active {
animation: bounce-in .3s;
}
.fade-leave-active {
animation: bounce-out .3s;
}
@keyframes bounce-in {
0% {
transform: translate3d(-100%, 0, 0);
}
25% {
transform: translate3d(-75%, 0, 0);
}
50% {
transform: translate3d(-50%, 0, 0);
}
75% {
transform: translate3d(-25%, 0, 0);
}
100% {
transform: translate3d(0px, 0, 0);
}
}
@keyframes bounce-out {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(25%, 0, 0);
}
50% {
transform: translate3d(50%, 0, 0);
}
75% {
transform: translate3d(75%, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
}
</style>