素材巴巴 > 程序开发 >

vue-router 页面切换动画

程序开发 2023-09-02 17:40:11

vue-router 页面切换动画

网上一直没翻到 vue-router 翻页动画的完美实现,就心[bei]动[bi]的,编了一个简单的动画组件。支持简单的前进后退的左右动画,针对不支持 history.state 的浏览器,也能支持简单的透明动画。

献上效果图:

预览

可下载此项目,打开 test.html,点击浏览器的前进、后退按钮,观看具体效果。项目地址

使用

使用前,请确保项目内,已经使用了 vue-loader

在需要动画的页面中,引用 src/vue-page-animation.vue 文件,并且在 router-view 组件中,添加 class="vue-page-animation-router-view",具体如下: