In order to be more efficient when developing mobile terminal products, independent developers usually use Web technology to develop mobile terminal projects, which can be adapted to Android, iOS and H5 at the same time, and can also be adapted to wechat mini programs with minor changes.

When developing mobile pages using vue.js, the default component transitions are too rigid and there is no animation at all. Therefore, I used the component transition function provided by Vue to write an animation imitating the page jump of wechat APP to improve user experience.

Without further ado, let’s get to the picture above

600 yuan Snapdragon 632 Android test machine smooth effect.

Very little code, uploaded to GitHub github.com/YellowDoing…

The core code

<transition :name="this.$store.routeAction">
     <router-view/>
</transition>
Copy the code

CSS

.push-enter-active,.push-leave-active,.pop-enter-active,.pop-leave-active{transition: all 0.4s; } .push-leave-to{ transform: translate(-20%,0); } .push-enter { transform: translate(100%, 0); } .push-enter-active { z-index: 10; } .push-leave-active { z-index: 0; } .pop-leave-active { transform: translate(100%, 0); z-index: 11; } .pop-enter{ transform: translate(-20%,0); }Copy the code

Vue.js Component transition related documentation cn.vuejs.org/v2/guide/tr…

Scan code to follow the wechat public account “IT Independent Developer”, to help programmers to expand the thinking ability of product, operation, design and so on, to develop independent products, to become a freelancer, to achieve wealth freedom.