vue2路由组件切换动画

快来打我* 2022-05-31 01:40 492阅读 0赞

[参考文章][Link 1]  
1.在路由对象的原型中添加一个方法和一个属性

Router.prototype.goBack = function () {  
        //也可以用下面注释的那种写法，this指向的就是Router.prototype
        //设置isBack为真让组件动画向右
    　　this.isBack = true
    　　window.history.go(-1)
    }
    //Router.prototype.isBack=true

2.到要应用切换动画的roter-view中添加渐变动画

2.1.在style标签中添加样式

.Router { transition: all 5s ease; }
    .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); }

3.在router-view所在组件中增加一个data属性

return { 　　　　　　transitionName: 'slide-right' // 默认动态路由变化为slide-right 　　　　}

4.在rotuer-view所在组件监听路由切换

$route (to, from) {
      　　　let isBack = this.$router.isBack//监听路由变化时的状态为前进还是后退
      　　　if(isBack) {
          　　　//向右后退
      　　　　　this.transitionName = 'slide-right'
      　　　} else {
          　　　//向左前进
      　　　　　this.transitionName = 'slide-left'
      　　　}
      　　  this.$router.isBack = false
    　　　}

5.后退向右滑动  
调用前面定义好的goBack方法，改变切换动画状态向右，和返回上一页

goBack(){ this.$router.goBack() }

nice,请注意`$route`和`$router`  
6.注意事项  
在使用转场动画时，正在进行转换动画播放过程中，新的组件和旧的组件dom都存在，就是说在指定动画的时间内旧dom还是存在的，如果你两个组件有重名的id，你的代码逻辑可能处理到旧的dom中了。

[Link 1]: https://www.cnblogs.com/szyblogs/p/7069577.html