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 --save
You 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.states
is 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