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

来源：5-2 在Vue中使用 animate.css 库

李行知

2018-04-22

不管是使用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动画最终导致了白屏。这个问题的出现原因是这个吗？应该怎么解决呢？

写回答

2回答

Dell

2018-04-22

已采纳

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

李行知

非常感谢！

2018-04-22

共2条回复

李行知

提问者

2018-04-22

以解决

<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

不错不错，加油

2018-04-22

共1条回复

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代，企业主流版本Vue2+Vue3全掌握

10675 学习 · 8191 问题

查看课程

相似问题

路由动画

回答 2