vue-router 中的过渡动效

曾经终败给现在 2022-05-19 03:21 220阅读 0赞

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：

当然要想要实现过渡效果需要配合过渡的css类名

*  v-enter:定义进入过渡的开始状态
 *  v-enter-active:定义进入活动状态
 *  v-enter-to:定义进入的结束状态
 *  v-leave:定义离开过渡的开始状态
 *  v-leave-active:定义离开的活动状态
 *  v-leave-to:定义离开的结束状态

看个示例：

结合官网上的示例图理解一下：

![Transition Diagram][]

如果想要效果比较好的话还需要添加过渡的模式，一共有两种模式：out-in和in-out

out-in:前一个路由状态离开后再执行当前状态

in-out:当前点击状态进入后再执行前一个路由的离开状态

如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用transition，并设置不同的name（此时设置css过渡类的时候，把v-,替换为各自的name-）如下示例：

css设置：（有默认状态的可以省略哈）

.left-enter{
        transform:translateX(100%);
      }
    .left-enter-active{
      transition:1s;
    }
    .left-leave-to{
      transform:translateX(-100%);
    }
    .left-leave-active{
      transition:1s;
    }

路由的动态过渡：

还可以基于当前路由与目标路由的变化关系，动态设置过渡效果：

vue中的设置：

css过渡类：

.v-leave{
      opacity:1;
    }
    .v-leave-to{
      opacity:0;
    }
    .v-leave-active{
      transition:2s;
    }
      .left-enter{
        transform:translateX(100%);
      }
    .left-enter-active{
      transition:1s;
    }
    .left-leave-to{
      transform:translateX(-100%);
    }
    .left-leave-active{
      transition:1s;
    }
    
    .right-enter{
      transform:translateX(-100%);
    }
    .right-enter-active{
      transition:1s;
    }
    .right-leave-to{
      transform:translateX(100%);
    }
    .right-leave-active{
      transition:1s;
    }

ok，如果您还想要了解更多，可以参看官网哦：

[https://cn.vuejs.org/v2/guide/transitions.html][https_cn.vuejs.org_v2_guide_transitions.html]

[https://router.vuejs.org/zh/guide/advanced/transitions.html][https_router.vuejs.org_zh_guide_advanced_transitions.html]

[Transition Diagram]: https://cn.vuejs.org/images/transition.png
[https_cn.vuejs.org_v2_guide_transitions.html]: https://cn.vuejs.org/v2/guide/transitions.html
[https_router.vuejs.org_zh_guide_advanced_transitions.html]: https://router.vuejs.org/zh/guide/advanced/transitions.html