Vue-router combined with transition to realize app animation switching effect example sharing

This article mainly brings you an example of Vue-router combined with transition to realize the forward and backward animation switching effect of the app. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

1. First configure the routing and modify the routing configuration

The routing configuration will not focus on the point. Add a goBack method to VueRoute to record the forward and backward status of the route

this.isBack = true VueRouter.prototype.goBack = function () { 
　　this.isBack = true
　　window.history.go(-1)
}

2. Monitor route changes (when the route changes, determine whether the routing status is forward or backward)

<template>
　　<p>

　　　　动态绑定路由动画，根据路由状态的不同绑定不同的路由动画分别为 ：‘slide-left' 和 'slide-right'

　　　　<transition> 
　　　　　　<router-view></router-view>
　　　　</transition>
　　</p>
</template>

<script>
export default {
　　data() {
　　　　return {
　　　　　　transitionName: &#39;slide-right&#39; // 默认动态路由变化为slide-right
　　　　}
　　},
　　watch: {
　　　&#39;$route&#39; (to, from) {
　　　　let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
　　　　　　if(isBack) {
　　　　　　　　this.transitionName = &#39;slide-right&#39;
　　　　　　} else {
　　　　　　 this.transitionName = &#39;slide-left&#39;
　　　　　}
　　this.$router.isBack = false
　　}
　 }
　}
</script>

3. Add different animation effects to the forward and backward animations. The specific code is as follows ：

<style>

.Router {
 position: absolute;
 width: 100%;
 transition: all .8s ease;
 top: 40px;
}

.slide-left-enter,
 .slide-right-leave-active {
 opacity: 0;
 -webkit-transform: translate(100%, 0);
 transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
 opacity: 0;
 -webkit-transform: translate(-100%, 0);
 transform: translate(-100% 0);
}
</style>

4. When routing forward, just follow the normal method;

5. When routing backward, just call the goBack method;

Related recommendations:

Comprehensive comparison of CSS3 animation-related properties transition, animation, and transform

Instance analysis of transition properties in CSS3

10 recommended articles about transition

The above is the detailed content of Vue-router combined with transition to realize app animation switching effect example sharing. For more information, please follow other related articles on the PHP Chinese website!