SoFunction
Updated on 2025-04-02

How to implement Vue page jump animation effect

Preface

Nowadays, mobile APPs have higher and higher requirements for user experience. Recently, they are committed to user experience optimization. Because they need to achieve animation effects similar to APP page switching, Baidu Google searches are not very complete, so they write their own documents. On the basis of achieving the effect, they will make up for the knowledge points of VueRouter and CSS transition animation. Interested friends are welcome to give me some advice.

vue-router is an official routing plug-in, and it is deeply integrated and suitable for building single-page applications. Vue's single page application is based on routing and components. The routing is used to set access paths and map paths and components. Traditional page applications use some hyperlinks to realize page switching and jumping. In the vue-router single page application, it is the switching between paths, that is, the switching of components.

Thoughts written in the front

  • How to match the corresponding page that needs to be redirected?
  • How to tell whether to "forward" or "retreat" and then use different animation methods?
  • How to animate different jumps?

Implementation process

1. Vue routing matching

Create a vue instance to match the route.

Creating a single page application with + Vue Router is very simple. Using, we can combine components to form an application. After adding Vue Router, what we need to do is map components to routes, and then tell Vue Router where to render them.

import Vue from 'vue'
import Router from 'vue-router'
(Router)
//If programming using modular mechanism，ImportVueandVueRouter，It needs to be called(Router)

Next, you can map the routing components:

The definition of (routing) components can be defined by yourself. Of course, in order to practice the idea of ​​modular componentization, we mostly import them from other files. The following is an example of the interaction of the four simple pages of "Login->Home Page->Order->Checkout":

import Login from '@/components/login' 
import Index from '@/components/index' 
import PointList from '@/components/pointList/pointList' 
import SettLement from '@/components/pointList/settlement' 

//Create a router instance and pass in the 'routes' configurationexport default new Router({
 //Routes configuration can be passed directly, or can be defined first and then used // Each route should map a component, where the component can be a component constructor created by(). Or just a component accessory object。(Nested routing is not considered today)
 routes: [
 {
 path: '/', // Log in name: 'Login',
 component: Login
 },
 {
 path: '/index', // Home page name: 'Index',
 component: Index
 },
 {
 path: '/pointList', // Order order name: 'PointList',
 component: PointList
 },
 {
 path: '/settLement', // Settlement name: 'SettLement',
 component: SettLement
 }
]
})

2. Router jump $router

In addition to using the global component router-link to achieve click jump (equivalent to a button), component routing can also use an instance object $router and some properties that the component itself has to achieve the goal.
$router is an instance object of VueRouter, equivalent to a global router object. Inside the Vue instance, you can access the routing instance through $router, which contains many attributes and sub-objects, such as history objects. The jump link that is often used can call this.$, and this.$ will add a new record to the history stack.

Declarative Programming
<router-link :to="..." (...)

Click is equivalent to calling (...)

(...) The parameter of the method can be a string, or an object describing the address:

// String('home')
// Object({ path: 'home' })
// Named routes({ name: 'user', params: { userId: 123 }})
// With query parameters, become /register?plan=private({ path: 'register', query: { plan: 'private' }})

Component routing jump instance:

1.

&lt;router-link :to="{name:'PointList', params: { userId: 123 }}"&gt;
 &lt;i class="icon"&gt;&lt;img src="../assets/" alt=""&gt;&lt;/i&gt;
 &lt;span&gt;Order order&lt;/span&gt;
&lt;/router-link&gt;

2.

<footer class="version" @click="goPage('Author')">v 1.0</footer>
//Js：
methods: {
 goPage(url, param) {
 this.$({ name: url });
 }
}

3. vue routing object $route (read-only)

In applications that use vue-router, the routing object is injected into each component, assigned the value to this.$route, and when the routing is switched, the routing object is updated. Therefore, route is equivalent to the currently redirected route object, and you can obtain name, path, params, query, etc. from it, that is, it contains the information obtained from the current URL parsing, and the routing record that the URL matches.

The routing object exposes the following properties (common):

1、$

string. The path equal to the current routing object will be resolved as an absolute path.
For example:/#/login?name=aa, this.$
, output "/login", that is, corresponding to the "path" in the route configuration when the route matches in 1 above;

2、$

string. Sometimes it is more convenient to identify a route by a name, especially when linking a route or performing some jumps. Similarly, the name here also corresponds to the name value that sets a name for a route in the routes configuration:

To link to a named route, you can pass an object to the to attribute of router-link:

<router-link :to="{name:'Order', params: { userId: 123 }}">
</router-link>

It is also the same thing when calling():

this.$({ name: 'Order', params: { userId: 123 }})

3、$

object. Router jump carries parameters:

this.$({ name: 'Order', params: { userId: 123 }})
(this.$); //123

4、$

object. Access to the query parameters carried:

this.$({name: 'login', query:{name: 'userName'}});
this.$; //you
//The route is:/#/login?name=userName。

5、$

string. Redirect source:

For example: { path: '*',redirect: {name: 'hello'}}
At this time, accessing the non-existent route /#/a will redirect to hello.
Access this.$; in hello output "/a".

6、$

array. All information declared by the route under the current route, from the parent route (if any) to the current route.

7、$

string. The hash value of the current path.

4. How to listen to $route by vue

watch：{‘$route' (to, from) {}}

route changes. The parameter values ​​in the default callback function of the object listened to in watch are newVal and oldVal. As the $route attribute, of course it is the concept of to and from.

Vue uses (transfer parameter) to jump to the page, change the parameters, observe the route changes in the jump route, refresh the page, and set an animation effect for the "from->to" process.

The difficulty of this function lies in how to obtain the "previous page" and "next page", that is, how to distinguish whether it is "forward" or "retreat"?

Example:

// watch $route determines which transition to usewatch:{
 '$route' (to, from) {
 //At this time, let's jump from the index page to the pointList page (to); // "/pointList"
 (from); // “/index”
 const routeDeep = ['/', '/index','/pointList', '/settLement'];
 const toDepth = ()
 const fromDepth = ()
  = toDepth &gt; fromDepth ? 'fold-left' : 'fold-right'
 }
 },

to and from are the most basic routing objects, which respectively represent jumping from (from) to (to) another page, (indicating the routing address to which you want to jump), the same is true.

Define routeDeep array, sort the routing directories in hierarchy (not considering nested routing for the time being). In complex single-page applications, the same level (such as multiple navigation buttons on the same page) are randomly ordered, and then arrange the next page and next page of each navigation in sequence... that is, ensure that each "previous page" is in front of "next page".

To sum up, in the order of routing directories defined in the routeDeep array, "toDepth > fromDepth" means "previous page" to jump to "next page". Similarly, you can judge whether it is "forward" or "back".

V. Usage of transition components in Vue2.0

<transition :name="transitionName">
 <router-view class="view app-view"></router-view>
</transition>
  • There is a name attribute in the transition to replace the class name in the vue hook function.
  • There can only be one child element in the transition and the child element needs to have v-show or v-if to control whether it is displayed.

Transitional CSS class name

The name attribute in transition is used to replace the class name transitionName in the vue hook function-

  • transitionName-enter: Defines the start state of entering the transition. Effective when the element is inserted and removed in the next frame.
  • transitionName-enter-active: Defines the end state of entering the transition. Effective when the element is inserted and removed after transition/animation is completed.
  • transitionName-leave: Defines the start state of leaving the transition. Effective when the departure transition is triggered, removed in the next frame.
  • transitionName-leave-active: Defines the end state of leaving the transition. Effective when the departure transition is triggered, removed after transition/animation is completed.
 = toDepth > fromDepth ? 'fold-left' : 'fold-right'

In "watch $route", when judging the "forward" and "back" of the page jump, decide to use different transition effects (fold-left or fold-right).

6. Implementation of animation and transform animation effects

In the previous topic, after judging the page jump path, different class names "fold-left" and "fold-right" are set for the transitions of the two jumps.
Then in CSS, different animation effects are set for the two class names (here we take "left swipe" and "right swipe" as examples):

.fold-left-enter-active {
 animation-name: fold-left-in;
 animation-duration: .3s;
 }
 .fold-left-leave-active {
 animation-name: fold-left-out;
 animation-duration: .3s;
 }
.fold-right-enter-active {
 animation-name: fold-right-in;
 animation-duration: .3s;
 }
 .fold-right-leave-active {
 animation-name: fold-right-out;
 animation-duration: .3s;
 }

The animation attribute is an abbreviation attribute that sets six animation attributes:

value describe
animation-name Specifies the keyframe name that needs to be bound to the selector.
animation-duration Specifies the time it takes to complete the animation, in seconds or milliseconds.
animation-timing-function Specifies the speed curve of the animation.
animation-delay Specifies the delay before the animation begins.
animation-iteration-count Specifies the number of times the animation should be played.
animation-direction Specifies whether animations should be played in reverse in turn. 

@keyframes fold-left-in {
 0% {
  transform: translate3d(100%, 0, 0);
 }
 100% {
  transform: translate3d(0, 0, 0);
 }
 }
 @keyframes fold-left-out {
 0% {
  transform: translate3d(0, 0, 0);
 }
 100% {
  transform: translate3d(-100%, 0, 0);
 }
 }

Create animations according to CSS3 @keyframes rules. The principle of creating animations is to gradually change one set of CSS styles into another set of styles. During the animation process, this CSS style can be changed many times. The time when the change occurs can be specified, or the keywords "from" and "to", equivalent to "0%" (the start time of the animation) and "100%" (the end time of the animation). Generally, in order to obtain the best browser support, 0% and 100% selectors should always be defined.

The transform attribute applies 2D or 3D transformations to the element. This property allows us to rotate, scale, move, or tilt the element.translate3d(x,y,z)Define 3D transformations, such astransform：translate3d(100%, 0, 0)Only changing the value of x means sliding horizontally and left, and other situations can be deduced accordingly.

Summarize

The above are the 6 steps to implement the animation effect function of the vue page, namely the 6 major knowledge points included in this function. Of course, it also includes many extended knowledge points. Learning is endless, and you need to slowly dig deeper...

Summarize

The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.