Vue+Vuex technology stack needed

The first to throw a figure







Transition animation.gif

When I was looking for mobile terminal framework on Awesomes, I found the page switching effect of VUX by accident. Later, I did not choose VUex for other considerations, but this switching effect really feels very new, so I took a look at the source code and posted a copy here for backup.

//app.vue <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')"> <keep-alive> <router-view class="router-view" ></router-view> </keep-alive> </transition> <script> import { mapState } from 'vuex' import sideFooter from "./components/Footer.vue" export default { name: 'app', data () { return { showFooter : false } }, components : { sideFooter }, computed:{ ... mapState({ direction: state => state.mutations.direction }) }, } </script> <style scoped> .vux-pop-out-enter-active, .vux-pop-out-leave-active, .vux-pop-in-enter-active, .vux-pop-in-leave-active { will-change: transform; transition: all 250ms; height: 100%; top: 0; position: absolute; backface-visibility: hidden; perspective: 1000; } .vux-pop-out-enter { opacity: 0; transform: translate3d(-100%, 0, 0); } .vux-pop-out-leave-active { opacity: 0; transform: translate3d(100%, 0, 0); } .vux-pop-in-enter { opacity: 0; transform: translate3d(100%, 0, 0); } .vux-pop-in-leave-active { opacity: 0; transform: translate3d(-100%, 0, 0); } </style>Copy the code
// main.js const history = window.sessionStorage; history.clear() let historyCount = history.getItem('count') * 1 || 0; history.setItem('/', 0); router.beforeEach(function (to, from, next) { const toIndex = history.getItem(to.path); const fromIndex = history.getItem(from.path); if (toIndex) { if (! fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) { store.commit('UPDATE_DIRECTION', {direction: 'forward'}) } else { store.commit('UPDATE_DIRECTION', {direction: 'reverse'}) } } else { ++historyCount; history.setItem('count', historyCount); to.path ! == '/' && history.setItem(to.path, historyCount); store.commit('UPDATE_DIRECTION', {direction: 'forward'}) } next() });Copy the code

Vuex is also used here, but I wrote a lot in Stroe and didn’t mention it. The main thing is to update each route direction with the UPDATE_DIRECTION method whether it is forward or backward.

The main idea in man.js is to add an index to the route and store it in sessionStorage, so that the clicked index value remains unchanged, the newly added route index increases by 1, and the count+1, so that when switching pages, by comparing the size of the index value, the large one moves to the right and the small one to the left, so as to achieve a regular transition from left to right.

So far, a transition effect of left and right switching has become. Recently, I haven’t updated the article much because I have been developing it. If any friends have good ideas, please feel free to communicate with me.