vue.js - vue 每次页面切换的过渡效果怎么实现？

问题描述

问 题

用vue开发项目，希望每次跳转页面的时候有一个loading的效果？请问这是怎么实现的？最好能给个demo。我希望是写一次这样的效果页面跳转的时候可以自动使用这个效果，而不是在每一页都去加同样的效果

解决方案

Vue官方文档上有说明： 点击查看

<transition :name="transitionName">
  <router-view></router-view>
</transition>

watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

<transition> 可以给<router-view>添加动画效果。
你加loading效果的话，设置transitionName对应过渡的CSS样式即可

这篇关于vue.js - vue 每次页面切换的过渡效果怎么实现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！