How to use vue-router, transition and keep-alive together in vue?
my routing switch has the effect of sliding left and right, so that"s how I use it.
</router-view>
</transition>
are two transition, one responsible for the animation of the keep-alive component and the other for the animation of the not-keep-alive. Each side is in charge of its own.
if there is a hidden danger, I will update it later.
Finally, please ask me how to change the question into the form of an article. no, no, no. For some reason, a post that asks a question becomes a post that answers a question.
in addition, I would like to ask you how to deal with this problem. ,
using transition-group can solve this problem
1. Your original way of writing
<transition-group :name="name">
<keep-alive key="keep-alive">
<router-view class="router-view" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view class="router-view" v-if="!$route.meta.keepAlive" key="not-keep-alive"></router-view>
</transition-group>
2. My revised way of writing
is to add an extra layer of div,v-if to div, and when switching routes, there will be the default transition effect of transition-group.
<transition-group :name="name">
<div key="keep-alive" v-if="$route.meta.keepAlive">
<keep-alive key="keep-alive">
<router-view class="router-view"></router-view>
</keep-alive>
</div>
<router-view class="router-view" v-if="!$route.meta.keepAlive" key="not-keep-alive"></router-view>
</transition-group>
Hello, I have this problem, too, but when I use your last way, the animation will lose
both router-view need to add key?. Your key didn't add a colon?
just encounters this problem. Try
</router-view>
</transition>
</div>
</template>
watch: {
// watch $router
$route(to, from) {
// tofrom,,
if (to.meta.keepAlive) {
this.transitionName = "slide-left";
} else {
if (to.meta.index > from.meta.index) {
//
this.transitionName = "slide-left";
} else {
this.transitionName = "slide-right";
}
}
},
},
.cake-right-enter-active,
.questions-right-leave-active,
.stories-left-enter-active,
.questions-left-leave-active {
width: 100vw;
will-change: transform;
transition: all 500ms;
position: absolute;
}
right-enter {
opacity: 0;
transform: translate3d (- 100%, 0,0)
}
.cake-right-leave-active {
opacity: 0;
transform: translate3d (100%, 0,0);
}
.conversation-left-enter {
opacity: 0;
transform: translate3d (100%, 0,0);
}
.regions-left-leave-active {
opacity: 0;
transform: translate3d (- 100%, 0,0);
}
