vue动画切换出现白屏问题

参考
https://github.com/feather-components/app-transition/blob/master/app-transition.vue
https://vue-js.com/topic/58c793f4a476ff9533840114

使用animate.css的一些动画的时候，会出现白屏效果，比如
bounceInRight这些
原因是因为
这些效果的作用是，先设置元素偏移到很远的地方，比如

transform: translate3d(-10000px, 0, 0);
然后再一步步进行修正
这个时候在前面的时候，因为位置偏移太远了，所以即使走了一段时间，此时位置依旧是在-999px
导致依旧显示不了。这个时候就可以使用百分比

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

这样一开始的偏移就是在屏幕边上了。
但是这个样子有个问题
不管我们设置的是进来的动画还是出去的动画，因为元素被替换 了，所以原来的元素的位置是空白，这个样子就导致了显示效果依旧不行

会出现这个样子的效果
因此我们可以给他再加上一个动画效果，使得他出去的时候也有动画，且时间一致。
但是这个时候，我们会发现效果很诡异。并没有看到我们想要的效果
这个时候我们需要把mode=’out-in’ 去除
再分析原因
我们可以发现有两个动画。并且执行了
但是因为布局的原因。导致了动画被挤下去了
这个时候我们可以使用absolute对路由进行布局，就可以实现无缝切换效果了。

<template>
<div 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>
</div>
</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>