This article mainly talks about the implementation of animation effects during route switching. The animation effects can be changed according to different paths. The following is the source code for reference:
<template>
<div >
<transition :name="transitionName">
<router-view class="child-view"></router-view>
</transition>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
transitionName: 'slide-left'
}
},
mounted () {
},
//The path to listen to the route, you can select different switching effects through different paths watch: {
'$route' (to, from) {
if( == '/'){
= 'slide-right';
}else{
= 'slide-left';
}
}
}
}
</script>
<style>
.child-view {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all .5s cubic-bezier(.55,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);
}
</style>
The routed API link is here, you can check it out for details/zh-cn/advanced/
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.