Vue - 转场动画

原创

于 2019-12-24 15:17:42 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

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

参考博客：手摸手，带你用 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），并将动画类型设置为退出动画

<template>
  <div id="app">
    <transition :name="$store.state.animateState">
      <router-view />

最低0.47元/天解锁文章