Vue页面切换滑动效果

试着用Vue做了个页面切换时滑动的效果，如下示例
源码 https://github.com/Aiden1204/VueAnimateDemo

这里使用了Vue的transition组件，具体可见文档
https://cn.vuejs.org/v2/guide/transitions.html

直接看实现过程

先在本机安装vue-cli

npm install -g @vue/cli

初始化一个项目

vue create hello-world

创建完毕后安装vue-router和vuex，现在vue-cli3支持图形化界面，可以直接在项目目录用ui启动，在管理页面点击安装

vue ui

然后建立这样一个项目结构

store.js

首先在vuex的仓库里存储页面切换的状态

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    states: 'turn-left'
  },
  mutations: {
    setTransition(state, states) {
        state.states = states
    }
  },
  actions: {

  }
})

建立四个切换用的页面

A,B,C,D换个颜色就行，记得在router.js里配置下路由，有问题可以去我的仓库看源码。

<template>
    <div class="A">
        <top title="a">top>
        <bottom bg="red">bottom>
    div>
template>

<script>
    import top from "../components/top.vue";
    import bottom from "../components/bottom.vue";
    export default {
        data() {
            return {};
        },
        components: {
            top,
            bottom
        }
    };
script>

<style scoped>
    .A {
        width: 100%;
        height: 100%;
        background-color: blue;
        position: fixed;
    }

style>

顶部标题和底部颜色都通过props传给子组件

top.vue

<template>
    <div class="header">
        <div class="left" @click="back">
            back
        div>
        <div class="center">
            {{title}}
        div>
    div>
template>

<script>
    export default {
        data() {
            return {};
        },
        props: ["title"],
        methods: {
            back() {
                this.$store.commit("setTransition", "turn-right");
                this.$router.back(-1);
            }
        }
    };
script>

<style scoped>
    .header {
        position: fixed;
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: rgb(100, 231, 60);
    }
    .clearfix {
        overflow: auto;
    }
    .left {
        position: fixed;
        left: 0;
        width: 60px;
    }
    .center {
        left: 50%;
        position: fixed;
    }
style>

bottom.vue

<template>
    <div class="bottom" :style="'top:'+ num + 'px;background-color: '+ bg + ';'">
        bottom
    div>
template>

<script>
    export default {
        name: "bottom",
        data() {
            return {
                num:0,
                test:1,
            };
        },
        props: ["bg"],
        mounted() {
            let screenH = document.documentElement.clientHeight || window.innerHeight;
            window.console.log(screenH);
            this.num = screenH - 50 - 50;
        }
    }
script>

<style scoped>
    .bottom {
        width: 100%;
        height: 50px;
        line-height: 50px;
        position: absolute;
    }
style>

过程中遇到的问题

原本底部是使用fixed定位的，但fixed在transition的动画中会出现一些奇怪的抖动，原因不明，有大佬知道的话希望能留言告知下。
这里使用absolute替代了fixed，进页面时获取页面高度，然后计算出top值。