Home Web Front-end JS Tutorial Vue-router combined with transition to realize app animation switching effect example sharing

Vue-router combined with transition to realize app animation switching effect example sharing

Jan 25, 2018 am 10:58 AM
transition vue-router animation

This article mainly brings you an example of Vue-router combined with transition to realize the forward and backward animation switching effect of the app. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

1. First configure the routing and modify the routing configuration

The routing configuration will not focus on the point. Add a goBack method to VueRoute to record the forward and backward status of the route

this.isBack = true VueRouter.prototype.goBack = function () { 
  this.isBack = true
  window.history.go(-1)
}
Copy after login

2. Monitor route changes (when the route changes, determine whether the routing status is forward or backward)

<template>
  <p>

    动态绑定路由动画,根据路由状态的不同绑定不同的路由动画分别为 :‘slide-left' 和 'slide-right'

    <transition :name="transitionName"> 
      <router-view class="Router"></router-view>
    </transition>
  </p>
</template>

<script>
export default {
  data() {
    return {
      transitionName: 'slide-right' // 默认动态路由变化为slide-right
    }
  },
  watch: {
   '$route' (to, from) {
    let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
      if(isBack) {
        this.transitionName = 'slide-right'
      } else {
       this.transitionName = 'slide-left'
     }
  this.$router.isBack = false
  }
  }
 }
</script>
Copy after login

3. Add different animation effects to the forward and backward animations. The specific code is as follows :

<style>

.Router {
 position: absolute;
 width: 100%;
 transition: all .8s ease;
 top: 40px;
}

.slide-left-enter,
 .slide-right-leave-active {
 opacity: 0;
 -webkit-transform: translate(100%, 0);
 transform: translate(100%, 0);
}

.slide-left-leave-active,
.slide-right-enter {
 opacity: 0;
 -webkit-transform: translate(-100%, 0);
 transform: translate(-100% 0);
}
</style>
Copy after login

4. When routing forward, just follow the normal method;

5. When routing backward, just call the goBack method;

Related recommendations:

Comprehensive comparison of CSS3 animation-related properties transition, animation, and transform

Instance analysis of transition properties in CSS3

10 recommended articles about transition

The above is the detailed content of Vue-router combined with transition to realize app animation switching effect example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Have Crossplay?
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

CSS Animation: How to Achieve the Flash Effect of Elements CSS Animation: How to Achieve the Flash Effect of Elements Nov 21, 2023 am 10:56 AM

CSS animation: How to achieve the flash effect of elements, specific code examples are needed. In web design, animation effects can sometimes bring a good user experience to the page. The glitter effect is a common animation effect that can make elements more eye-catching. The following will introduce how to use CSS to achieve the flash effect of elements. 1. Basic implementation of flash First, we need to use the animation property of CSS to achieve the flash effect. The value of the animation attribute needs to specify the animation name, animation execution time, and animation delay time

Animation not working in PowerPoint [Fixed] Animation not working in PowerPoint [Fixed] Feb 19, 2024 am 11:12 AM

Are you trying to create a presentation but can't add animation? If animations are not working in PowerPoint on your Windows PC, then this article will help you. This is a common problem that many people complain about. For example, animations may stop working during presentations in Microsoft Teams or during screen recordings. In this guide, we will explore various troubleshooting techniques to help you fix animations not working in PowerPoint on Windows. Why aren't my PowerPoint animations working? We have noticed that some possible reasons that may cause the animation in PowerPoint not working issue on Windows are as follows: Due to personal

How to set up ppt animation to enter first and then exit How to set up ppt animation to enter first and then exit Mar 20, 2024 am 09:30 AM

We often use ppt in our daily work, so are you familiar with every operating function in ppt? For example: How to set animation effects in ppt, how to set switching effects, and what is the effect duration of each animation? Can each slide play automatically, enter and then exit the ppt animation, etc. In this issue, I will first share with you the specific steps of entering and then exiting the ppt animation. It is below. Friends, come and take a look. Look! 1. First, we open ppt on the computer, click outside the text box to select the text box (as shown in the red circle in the figure below). 2. Then, click [Animation] in the menu bar and select the [Erase] effect (as shown in the red circle in the figure). 3. Next, click [

How to use Vue to implement typewriter animation effects How to use Vue to implement typewriter animation effects Sep 19, 2023 am 09:33 AM

How to use Vue to implement typewriter animation special effects Typewriter animation is a common and eye-catching special effect that is often used in website titles, slogans and other text displays. In Vue, we can achieve typewriter animation effects by using Vue custom instructions. This article will introduce in detail how to use Vue to achieve this special effect and provide specific code examples. Step 1: Create a Vue project First, we need to create a Vue project. You can use VueCLI to quickly create a new Vue project, or manually

After a two-year delay, the domestic 3D animated film 'Er Lang Shen: The Deep Sea Dragon' is scheduled to be released on July 13 After a two-year delay, the domestic 3D animated film 'Er Lang Shen: The Deep Sea Dragon' is scheduled to be released on July 13 Jan 26, 2024 am 09:42 AM

This website reported on January 26 that the domestic 3D animated film "Er Lang Shen: The Deep Sea Dragon" released a set of latest stills and officially announced that it will be released on July 13. It is understood that "Er Lang Shen: The Deep Sea Dragon" is produced by Mihuxing (Beijing) Animation Co., Ltd., Horgos Zhonghe Qiancheng Film Co., Ltd., Zhejiang Hengdian Film Co., Ltd., Zhejiang Gongying Film Co., Ltd., Chengdu The animated film produced by Tianhuo Technology Co., Ltd. and Huawen Image (Beijing) Film Co., Ltd. and directed by Wang Jun was originally scheduled to be released in mainland China on July 22, 2022. Synopsis of the plot of this site: After the Battle of the Conferred Gods, Jiang Ziya took the "Conferred Gods List" to divide the gods, and then the Conferred Gods List was sealed by the Heavenly Court under the deep sea of ​​Kyushu Secret Realm. In fact, in addition to conferring divine positions, there are also many powerful evil spirits sealed in the Conferred Gods List.

Hayao Miyazaki's animated film 'Porco Rosso' has been extended to January 16 next year, with a Douban score of 8.6 Hayao Miyazaki's animated film 'Porco Rosso' has been extended to January 16 next year, with a Douban score of 8.6 Dec 18, 2023 am 08:07 AM

According to news from this site, Miyazaki Hayao's animated film "Porco Rosso" has announced that it will extend the release date to January 16, 2024. This site previously reported that "Porco Rosso" has been launched in the National Art Federation Special Line Cinema on November 17, with a cumulative box office of over 2,000 10,000, with a Douban score of 8.6, and 85.8% of 4 and 5 star reviews. "Porco Rosso" was produced by Studio Ghibli and directed by Hayao Miyazaki. Moriyama Moriyama, Tokiko Kato, Otsuka Akio, Okamura Akemi and others participated in the dubbing. It was originally released in Japan in 1992. The film is adapted from Hayao Miyazaki's comic book "The Age of Airships" and tells the story of the Italian Air Force's ace pilot Pollock Rosen who was magically turned into a pig. After that, he became a bounty hunter, fighting against air robbers and protecting those around him. Plot synopsis: Rosen is a soldier in World War I

The final PV of the main animation 'Arknights: Winter Hidden Return' has been announced and will be launched on October 7 The final PV of the main animation 'Arknights: Winter Hidden Return' has been announced and will be launched on October 7 Sep 23, 2023 am 11:37 AM

The content that needs to be rewritten on this site is: 9 The content that needs to be rewritten is: Month The content that needs to be rewritten is: 23 The content that needs to be rewritten is: Daily News, the main line drama of the second season of the animated series "Arknights" "Arknights: Winter Hidden Return" has announced its final release. The content that needs to be rewritten is: PV. The content that needs to be rewritten is: 10. The content that needs to be rewritten is: 7. The content that needs to be rewritten is: 7 The content is: The content that needs to be rewritten is: 00:23 The content that needs to be rewritten is: Officially launched, click here to enter the official website of the theme. The content that needs to be re-written is: This site has noticed that "Arknights: Winter Hidden Return" is the sequel to "Arknights: Prelude to Dawn". The plot summary is as follows: In order to prevent the infected, a group of

The final trailer for Netflix's claymation film 'Chicken Run 2” has been announced and will be released on December 15 The final trailer for Netflix's claymation film 'Chicken Run 2” has been announced and will be released on December 15 Nov 20, 2023 pm 01:21 PM

The final trailer for Netflix's claymation film "Chicken Run 2" has been released. The film is expected to be released on December 15. This site noticed that the trailer for "Chicken Run 2" shows Chicken Loki and King Kong. Jay launches an operation to find his daughter Molly. Molly is taken away by a truck at FunLand Farm, and Rocky and Ginger risk their lives to retrieve their daughter. The film is directed by Sam Fehr and stars Sandy Way Newton, Zachary Levi, Bella Ramsey, Imelda Staunton and David Bradley. It is understood that "Chicken Run 2" is the sequel to "Chicken Run" after more than 20 years. The first work was released in China on January 2, 2001. It tells the story of a group of chickens who face the fate of being turned into chicken pies in a chicken factory.

See all articles