Web Front-end
JS Tutorial
How to implement the effect of vue router automatically judging the left and right page turning transition animation
How to implement the effect of vue router automatically judging the left and right page turning transition animation
Jan 25, 2018 am 11:47 AM
I did a mobile spa project some time ago. The technology is based on: vue + vue-router + vuex + mint-ui. Because the webpack template of vue-cli scaffolding is used, all pages have files with the .vue suffix as a Component, this article mainly shares with you Vue Router’s automatic judgment of left and right page turning transition animation effects. I hope it can help you.
There are relatively few projects in the company recently and finally I have time to record some of my little experience in using vue-router.
General mobile port single-page applications will have some problems when jumping to the page. Corresponding transition animation, such as:
1. The transition animation that needs to be displayed when jumping from the current first-level page to the second-level page is when the first-level page moves to the left side of the screen and disappears,
Secondary pages appear moving from the right to the left of the screen. (Similar to the effect of turning a book to the next page)
2. The transition animation that needs to be displayed when jumping from the current second-level page back to the first-level page is when the second-level page moves to the right side of the screen and disappears,
The first-level page appears moving from the left to the right of the screen. Similar to (the effect of turning a book back to the previous page)
But a question arises: How to determine the hierarchical relationship between the current page and the page to be jumped?
My solution is: when creating a page (component), set the path (access path) attribute of the page in the router that defines the page to distinguish the hierarchical relationship between components.
For example, the access path of a first-level page (component) ‘A’ is ‘/A’. The access path of his secondary page 'B' is '/A/B'.
Then before jumping to the page, you only need to compare the path depth of the current page and the page to be jumped to dynamically Set up transition animation.
For example, the depth of '/A/B' > the depth of '/A', then jumping from page B to page A should be effect 2: (the effect of turning a book back to the previous page) .
one. First the parent page
home.vue:
<!-- keepAlList是用來動態(tài)判斷組件是否需要keep-alive,建議保存到vuex中作為全局變量，至于下方的css動畫，看官可以按照喜好自由修改-->
<transition :name="transNa">
?<keep-alive :include="keepAlList">
?<router-view class="child-view"></router-view>
?</keep-alive>
</transition>
<style scoped>
.child-view?{
?position:?absolute;
?width:?100%;
?height:?100%;
?transition:?all?.5s?ease;
?-webkit-transition:?all?.5s?ease;
?-moz-transition:?all?.5s?ease;
}
.rightin-enter,
.leftin-leave-active?{
?opacity:?0;
?transform:?translate3d(50%?0,?0);
?-webkit-transform:?translate3d(50%,?0,?0);
?-moz-transform:?translate3d(50%,?0,?0);
}
.leftin-enter,
.rightin-leave-active?{
?opacity:?0;
?transform:?translate3d(-50%?0,?0);
?-webkit-transform:?translate3d(-50%,?0,?0);
?-moz-transform:?translate3d(-50%,?0,?0);
}
</style>
two. Secondly, I attach my main.js fragment (used to dynamically set the transition animation before jumping to the page)
main.js:
//進(jìn)入路由之前設(shè)置攔截器
let?noLoginList?=?["login",?"register",?"forget",?"home",?"classify",?"goodsDetial"];
router.routeInfo.beforeEach((to,?from,?next)?=>?{
?let?user?=?sessionStorage.getItem('user');
?//如果要去登錄頁面
?if?(noLoginList.indexOf(to.name)?>=?0)?{
??if?(!user?||?user?==?'')?{
???//未登錄的狀態(tài)通行
???next();
???return;
??}?else?{
???if?(["login",?"register",?"forget"].indexOf(to.name)?>=?0)?{
????//已登錄的狀態(tài)去首頁
????next({
?????name:?'home'
????});
????return;
???}?else?{
????//已登錄的狀態(tài)去首頁
????next();
????return;
???}
??}
?}?else?{
??//去登錄頁面以外的頁面(以下是本文關(guān)鍵代碼)
??if?(user?&&?user?!=?'')?{
???//判斷是否為需要緩存組件,如果是添加組件名到數(shù)組
???if?(to.meta.keepAlive)?{
????const?toName?=?to.name;
????let?keepLi?=?store.getters.getKeepAlList;
????keepLi.indexOf(toName)?< 0 ? keepLi.push(toName) : '';
store.commit('SET_KEEPALLIST', keepLi);
}
//根據(jù)路徑名深度設(shè)置轉(zhuǎn)場動畫類型
store.commit('SET_TRANSNA', (to.path.split('/').length < from.path.split('/').length ? 'leftin' : 'rightin'));
next();
} else {
let toWhere = router.nameList.indexOf(to.name) >=?0???to?:?{name:?'home'};
???next({
????name:?'login',
????params:?{
?????jumpTo:?{
??????name:?toWhere.name,
??????params:?toWhere.params,
??????query:?toWhere.query,
?????},
????}
???});
??}
?}
});
Related recommendations:
jquery realizes the special effect of keyboard turning left and right_jquery
vue router uses jquery and params to pass parameters in detail
vue router routing parameters refresh and disappear Solution to the problem
The above is the detailed content of How to implement the effect of vue router automatically judging the left and right page turning transition animation. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to distinguish left and right earphones rl How to wear left and right earphones
Feb 22, 2024 pm 05:10 PM
L stands for left, worn on the left ear, and R stands for right, worn on the right ear. Analysis 1 Usually there are logos on the earphones. The English letters are abbreviated as L and R. L stands for left and is worn on the left ear. R stands for right and is worn on the right ear. The specific positions marked by R and L are not fixed and are based on the specific headphones. Some headphones will mark R in red. For headphones that come with a mobile phone, the side with the microphone and buttons is usually on the right side. Supplement: Types of Headphones 1 Headphones are a symbol of people’s portable audio. Headphones can be divided into two specifications: OMTP specifications are generally called national standards, and CTIA are generally called international standards. Earphones are classified according to their energy conversion methods, specifically: dynamic coil method, moving iron method, static method
React Router User Guide: How to implement front-end routing control
Sep 29, 2023 pm 05:45 PM
ReactRouter User Guide: How to Implement Front-End Routing Control With the popularity of single-page applications, front-end routing has become an important part that cannot be ignored. As the most popular routing library in the React ecosystem, ReactRouter provides rich functions and easy-to-use APIs, making the implementation of front-end routing very simple and flexible. This article will introduce how to use ReactRouter and provide some specific code examples. To install ReactRouter first, we need
Power consumption testing and evaluation (rx588 power consumption testing and evaluation)
Dec 31, 2023 pm 09:38 PM
The power consumption of rx588 is about 250W. Watching movies on the rx580 consumes power, but not much. Many videos require hardware to decode. A graphics card will be used more or less. The platform power consumption of xfx Crimson and Dylan Demon + 7700K single card is about 380w, 7700k is counted as 100w, and other devices together are up to 30w, that is, the power consumption of rx588 is about 250w, and the power consumption of the dual-card machine is 630w to 650w , more than 700w is enough, but the load of the power supply is too high at this time, which affects the life. Calculated based on the load of 60% to 80%, the ideal power supply rated power is 850 to 1000w. It depends on what kind of CPU is used and whether it is overclocked. . Does h61 motherboard support 588 graphics card? H61 motherboard itself is
How to turn pages in word
Mar 19, 2024 pm 07:22 PM
Word is one of the commonly used office software. When the edited text content is long and difficult to read, you can turn pages in Word. Below, the editor will share with my friends a simple tutorial on how to turn pages in Word! Hope this helps you guys! 1. First, we open the multi-page word document in word software on the computer. As shown in the picture below: 2. Click the upward arrow on the scroll bar of the word interface to scroll up and turn pages. As shown in the picture below: 3. If you need to page down, click the downward arrow of the scroll bar. As shown in the picture below: 4. Click the arrow of the scroll bar to turn pages. This kind of page turning is more casual. We need to quickly turn pages by using the right mouse button to click on the scroll bar. as follows
The unique advantages of Vue Router Lazy-Loading routing, how to optimize page performance?
Sep 15, 2023 am 10:36 AM
VueRouter is a routing management plug-in officially provided by Vue.js. It can help us implement page navigation and route switching in Vue applications. The Lazy-Loading feature is a unique advantage of VueRouter, which can greatly optimize page performance. In this article, we will introduce VueRouter’s Lazy-Loading routing feature and provide some practical code examples for optimizing page performance. Lazy-Loading means when needed
What should I do if react router does not display?
Dec 30, 2022 am 09:30 AM
Solution to react router not displaying: 1. Add browserRouter to the parent routing component to wrap the router; 2. Use "this.props.history.go()" to refresh the component; 3. Add "forcerefresh" to the browserrouter parameter ={true}"; 4. Write a hook function in "<Route>" and call it when leaving or entering this route.
How to use Router to implement redirection function in Vue project
Sep 15, 2023 am 08:36 AM
How to use Router to implement redirection function in Vue project In a Vue project, we often need to implement jump and redirection functions between pages. And VueRouter provides a simple yet powerful solution. This article will introduce how to use Router to implement the redirection function in the Vue project and give specific code examples. Install VueRouter First, we need to install VueRouter in the Vue project. Can
Vue Router Lazy-Loading routing: a trend to help improve page performance
Sep 15, 2023 am 08:03 AM
VueRouter is the official route manager in the Vue.js framework. It allows developers to switch page content through route mapping, making single-page applications more controllable and easier to maintain. However, as applications become more complex, the loading and parsing of routes can become a performance bottleneck. In order to solve this problem, VueRouter provides a function of lazy loading of routes, which defers the loading of routes until actually needed. Lazy-loading is a loading technology that
