原文链接:戳我
vue 提供了transition用来写动画 首先第一步 我们在App.vue 中 用transition把 router-view 包起来
这里可以看到我的 name 是使用 动态绑定的 这一步 使用来 实现 上一层和下一层的不同动画切换的
所以我们在data里面定义了SkipSwitchName,然我我们下一步先 把 跳转动画写好。根据 vue 官网 transition 提供的 值 来进行写动画
做完这些 我门下一部就开始做 动态绑定name值的切换 并 判断上下层 来绑定对应的动画name,
那么第一步 肯定就是要判断路由啦。应为我们是时时监听了,这里 我们就可以用 vue 提供的 watch 来做了下图 使用watch 监听 $router的变化 (关于router 在我置顶文章中有露面),当然只是获取到路由还是不够的 所以我们在给每个路由做一个标识 当然名字是可以随便定义的但要保持一致
这样 路由跳转动画 就结束了 发挥自己的想象力做出 好看的动画吧!
版权声明:本文为CSDN博主「授社」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原创链接点我看原创