vueアニメーション切り替えにホワイトスクリーンの問題が発生

リファレンスhttps://github.com/feather-components/app-transition/blob/master/app-transition.vue https://vue-js.com/topic/58c793f4a476ff9533840114
使用するcssのアニメーションの一部では、bounceInRightなどの白いスクリーン効果が現れます.これらの効果の役割は、要素を遠くにシフトさせることです.例えば、
transform: translate3d(-10000px, 0, 0); そしてさらに一歩ずつ修正を行うこのとき前にいるときは、位置ずれが遠すぎるため、しばらく歩いても位置が-999 pxで表示されないままです.この時点でパーセンテージを使うことができます

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

このように最初のオフセットは画面の端にあります.しかし、この様子には問題があります.私たちが入ってきたアニメーションでも出てきたアニメーションでも、要素が置き換えられたため、元の要素の位置が空白になり、この様子では表示効果が低下します.
このような効果が現れるので、私たちは彼にアニメーション効果を加えることができて、彼が外に出たときもアニメーションがあって、時間が一致します.しかし、この時、私たちは効果が奇妙であることに気づきます.私たちが望んでいる効果は見られませんでした.この時、mode='out-in'を除去して原因を分析する必要があります.私たちは2つのアニメーションがあることを発見することができます.また、レイアウトのために実行されました.アニメーションが押し込まれた場合、absoluteを使用してルーティングをレイアウトすることができ、シームレスな切り替え効果を実現することができます.

<template>
<div id="app">

<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>