zhengguorong / Pageainimate
Licence: other
vue实现webapp页面切换动画
Stars: ✭ 301
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Pageainimate
Ionic Vue
Vuejs integration for Ionic versions 4 and 5
Stars: ✭ 275 (-8.64%)
Mutual labels: vue-router
Plato
❤️ a Boilerplate for [mobile] SPAs use vue, vuex, vue-router
Stars: ✭ 283 (-5.98%)
Mutual labels: vue-router
Vue Vben Admin
A modern vue admin. It is based on Vue3, vite and TypeScript. It's fast!
Stars: ✭ 8,036 (+2569.77%)
Mutual labels: vue-router
Vue Smart Route
Smart route search to make intelligent looking apps with Vue.js.
Stars: ✭ 280 (-6.98%)
Mutual labels: vue-router
Vue2 Spa Tutorial
Vue2.x(即将升Vue 3)、 Webpack 4.x、Babel 7.x
Stars: ✭ 267 (-11.3%)
Mutual labels: vue-router
Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (+0%)
Mutual labels: vue-router
Space Snake
A Desktop game built with Electron and Vue.js.
Stars: ✭ 289 (-3.99%)
Mutual labels: vue-router
Vuejs Firebase Shopping Cart
Shopping cart demo using Vuejs and Firebase
Stars: ✭ 274 (-8.97%)
Mutual labels: vue-router
Mui Vue2
mui+mint+vue2.x+vue-router+vuex+webpack最终打包成原生apk的app项目,样式使用vue移动端mint ui框架,原生手机能力偏重于mui框架,欢迎star!
Stars: ✭ 278 (-7.64%)
Mutual labels: vue-router
Roastandbrew
Updated content available! We learned a lot since we originally wrote this article. We now have this updated for Laravel 8, Vue, and NuxtJS 👉 https://srvrsi.de/book
Stars: ✭ 300 (-0.33%)
Mutual labels: vue-router
Vue Testing Examples
Advanced testing with vuejs. When you need to go beyond Getting started section and see some real world example with everything that proper tests should have.
Stars: ✭ 288 (-4.32%)
Mutual labels: vue-router
pageAninmate
vue-router实现webApp切换效果
运行方法
# 安装依赖
npm install
# 浏览器打开localhost:8080
npm run dev
演示效果
iOS滑动效果,可以切换到ios分支获取代码
快速集成
1.复制PageTransittion.vue到项目目录。 2.修改router配置。
Router.prototype.goBack = function () {
this.isBack = true
window.history.go(-1)
}
const router = new Router({
routes: [
{
path: '/',
name: 'PageTransition',
component: PageTransition, // 引入页面切换组件
children: [{
path: '',
component: Index // 父路由访问页面,例如,访问www.aaa.com/ 显示的是Index组件
}, {
path: '/pageA',
component: PageA // 子路由组件 例如,访问www.aaa.com/pageA 显示为PageA
}, {
path: '/pageB',
component: PageB // 子路由组件 例如,访问www.aaa.com/pageB 显示为PageB
}]
}
]
})
方案实现
记录页面状态
要实现页面前进后台动画,首先必须知道页面状态(即是页面是进入下一页,还是后退),我们可以通过改写router.go方法记录回退状态,页面如果需要回退时,调用
$router.go(-1)
修改router/index.vue
// 增强原方法,好处是旧的业务模块不需要任何变动
Router.prototype.go = function () {
this.isBack = true
window.history.go(-1)
}
// 或者你可以新建一个方法
Router.prototype.goBack = function () {
this.isBack = true
this.go(-1)
}
当new Router时,实例就包含go/goBack方法。
监听路由变化
使用嵌套路由的方式引入子页面,监听根路由的update钩子做相应操作。
beforeRouteUpdate (to, from, next) {
// 如果isBack为true时,证明是用户点击了回退,执行slide-right动画
let isBack = this.$router.isBack
if (isBack) {
this.transitionName = 'slide-right'
} else {
this.transitionName = 'slide-left'
}
// 做完回退动画后,要设置成前进动画,否则下次打开页面动画将还是回退
this.$router.isBack = false
next()
}
动画效果
通过transition执行动画
<transition :name="transitionName">
<router-view class="child-view"></router-view>
</transition>
css代码
.child-view {
position: absolute;
width:100%;
transition: all .8s cubic-bezier(.55,0,.1,1);
}
.slide-left-enter, .slide-right-leave-active {
opacity: 0;
-webkit-transform: translate(50px, 0);
transform: translate(50px, 0);
}
.slide-left-leave-active, .slide-right-enter {
opacity: 0;
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
}
路由设置
router/index.js
const router = new Router({
routes: [
{
path: '/',
name: 'PageTransition',
component: PageTransition,
children: [{
// 该路由为父路由的默认路由
path: '',
component: Index
}, {
path: '/pageA',
component: PageA
}, {
path: '/pageB',
component: PageB
}]
}
]
})
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].