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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.