路由动画效果切换白屏问题

Question

不管是使用animate.css的动画效果还是使用自定义的，都会有一段事件的白屏，在动画效果切换过程中。使用了mode也没有解决问题。这个问题应该怎么解决？

使用animate.css的时候

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

使用自定义的css的时候，这个时候上面的class不存在

.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s ease;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
.child-view {
position: absolute;
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(30px, 0);
transform: translate(30px, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
-webkit-transform: translate(-30px, 0);
transform: translate(-30px, 0);
}

我观察了控制台，感觉，问题可能出现在动画间隙上面

在执行完leave动画以后隔了一下才指向了enter动画最终导致了白屏。这个问题的出现原因是这个吗？应该怎么解决呢？

Answer 1

Dell 2018-04-22 17:46:28

是的，你把mode去掉就可以了，我不知道你想实现什么样的效果

• 提问者 李行知 #1

  希望滑动的时候显示效果流畅一点，现在用了一种方法来解决了。前面出现的问题是因为滑动的时候，translate太过了，导致动画开始的一些时候没有移动到屏幕位置导致了此处看起来没有的样子。
  还有一个问题是absolute的原因

• 提问者 李行知 #2

  非常感谢！

Answer 2

提问者 李行知 2018-04-22 19:06:33

以解决

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

原因在与translate与absolute

• Dell #1

  不错不错，加油