Hand touch, with Vue animation to achieve native app switching effect, silky-like experience

First Look

Full source on GitHub:

Https://github.com/imfing/vuexlearn

Get ready

Before you start you need to have Vue Foundation and install the VUE-CLI.

Begin

Create a new Vue project:vue init webpack vuexlearn
Remember to select the Vue-router when installing

After entering the Vuexlearn directory, install Vuex:
npm install vuex --saveYou can also install it using NPM installation in other ways, please refer to Vuex official documentation.

After you have installed Vuex, you can use the npm run dev command to run your Web app.

Now main.js introduce Vuex in the file

Main.js

import vuex from ‘vuex‘Vue.use(vuex);

Add our Vuex state tree below

var store = new vuex.Store({//store对象  state: {    states: ‘turn-on‘  },  mutations: {    setTransition(state, states) {      state.states = states    }  }})

state.statesis used to record our current switching state, turn-on for the page into the stack, turn-off is the page out of the stack.

setTransition(state, states)method is used to set the value of the states, which we call when needed.

Next, we create a new common component as our title bar

Common.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-off");      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: 0px;  width: 60px;}.center {  left: 50%;  position: fixed;}</style>

Here props , by name the value you get, render it on the title bar.

The switch core here is to set the animation of the entire page when you click Back.

Create 4 new pages, other pages are identical, so only one page is posted here

A.vue

<template>    <div class="A">        <common title="a"></common>        <div class="bottom">            bottom        </div>    </div></template><script>import common from "./common";export default {  data() {    return {};  },  components: {    common  }};</script><style scoped>.A {  width: 100%;  height: 100%;  background-color: rgb(214, 198, 52);  position: fixed;}.bottom {  width: 100%;  height: 50px;  background-color: red;  position: fixed;  bottom: 0px;}</style>

App.vue

<template> <div id= "app" > <router-link to= "/A" @click. native= "Clicklink" >A</router-link> &L T;router-link to= "/b" @click. native= "Clicklink" >B</router-link> <router-link to= "/C" @click. native= "    Clicklink ">C</router-link> <router-link to="/d "@click. native=" Clicklink ">D</router-link> <transition:name= "$store. State.states" > <router-view/> </transition> <div>index page&l  T;/div> </div></template><script>export Default {name: "App", data () {return {};    }, Methods: {Clicklink () {this. $store. Commit ("Settransition", "turn-on");    }}, mounted () {var _this = this;      Window.addeventlistener ("Popstate", function (e) {_this. $store. Commit ("Settransition", "turn-off");  }, False);  }};</script><style>* {margin:0; padding:0;}. btn {width:50%;} Html,body, #app {height:100%;}. Turn-on-enter {TranSform:translate3d (100%, 0, 0);}. turn-on-leave-to {/* Transform:translate3d ( -20%, 0, 0); */}.turn-on-enter-active,.turn-on-leave-active {transition:t Ransform 0.4s Ease;}. Turn-off-enter {/* Transform:translate3d ( -20%, 0, 0); */}.turn-off-leave-to {transform:translate3d (100%, 0, 0);}. turn-off-enter-active,.turn-off-leave-active {transition:transform 0.4s ease;}. turn-off-leave-active {z-index:2;} </style>

The toggle effect is defined here, by Vuex Global save variables to the page into the stack, the animation effect of the stack.

Full source on GitHub:

Https://github.com/imfing/vuexlearn

Finally, look at:

Hand touch, with Vue animation to achieve native app switching effect, silky-like experience