vue转场动画 路由跳转动画(非原创)

        原文链接:戳我


 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版权协议,转载请附上原文出处链接及本声明。

原创链接点我看原创

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容