Vue - 转场动画

最新推荐文章于 2024-05-31 11:04:13 发布

jnChen10

最新推荐文章于 2024-05-31 11:04:13 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/sinat_33184880/article/details/103683182

本文介绍了如何使用Vue的transition组件创建类似微信的转场动画，包括前进和退出动画。在前进时，页面向左滑出，新页面从右滑入；退出时，页面向右滑出，上一页面从左滑入。通过在store中存储变量来判断动画类型，并在App.vue中监听路由变化以设置退出动画。同时，定义了路由跳转的mixins函数，以及处理底部导航栏切换时不使用转场动画的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考博客：手摸手，带你用 vue 动画实现原生 app 切换效果，丝滑般的体验

使用vue官方提供的transition组件实现类似微信的转场动画效果，动画分前进动画与退出动画两种

当跳转至新页面（前进）时，当前页面向左侧滑出，新页面从右侧滑入
当触发返回（退出）时，当前页面向右侧滑出，上一层页面从左侧滑入

所以需要在store中存放一个变量，transtion组件根据变量名判断使用前进动画还是退出动画

// store.js
export default new Vuex.Store({
  state: {
    animateState: ''
  },
  mutations: {
    setAnimateState (state, animateState) {
      state.animateState = animateState
    }
  }
})

在App.vue中监听路由返回（popstate），并将动画类型设置为退出动画