Record the difficulties encountered in daily development

Recently, I was working on a Vue project, and I wanted to add some transition effects between page jumps because multiple page jumps were too rigid


is a basic dynamic component, so we can use the
component to add some transitions to it:
 

<transition>
 <router-view></router-view>
</transition>
Copy the code

The class name of the transition phase

V – is the default prefix for class names that are switched in transition if you use an unnamed
. If you use
then v-Enter will be replaced with my-transition-Enter.

There are six class switches in the entry/exit transition.

  1. v-enter: Defines the state at the beginning of the transition. It takes effect before the element is inserted and is removed the next frame after the element is inserted.
  2. v-enter-active: Defines the state when the transition takes effect. Applied throughout the transition phase, before the element is inserted and removed after the transition/animation is complete. This class can be used to define the process time, delay, and curve functions that enter the transition.
  3. v-enter-to: Version 2.1.8 and above defines the end of the transition. The next frame takes effect after the element is inserted (at the same timev-enterRemoved) after the transition/animation is complete.
  4. v-leave: Defines the beginning state of the exit transition. Immediately after the exit transition is triggered, the next frame is removed.
  5. v-leave-active: Defines the state when the exit transition takes effect. Applies throughout the exit transition phase, takes effect immediately when the exit transition is triggered, and removes after the transition/animation is complete. This class can be used to define exit transition process time, delay and curve functions.
  6. v-leave-to: Version 2.1.8 and above defines the end state of leaving the transition. The next frame takes effect after the exit transition is triggered (at the same timev-leaveBe delete

Except), removed after the transition/animation is complete.

The transition properties

  • name– string automatically generates the CSS transition class name. Such as:name: 'fade'Automatically expand to.fade-enter..fade-enter-activeAnd so on. Default class name"v"
  • appear– Boolean, whether to use transitions during initial rendering. The default isfalse.
  • css– Boolean, whether to use CSS transition classes. The default istrue. If set tofalse, will trigger registered JavaScript hooks only through component events.
  • type– string specifies the transition event type and listens for the end of the transition. Valid values for"transition" 和 "animation". By default, vue.js will automatically detect long duration transient event types.
  • mode– string controls the time series of the exit/entry transition. There are effective patterns"out-in" 和 "in-out"; The default is simultaneous.
  • duration – number | { enter: number, leave: number} Specifies the duration of the transition. By default, Vue waits for the first root element of the transitiontransitionend 或 animationendEvents.

Transition mode:

1. In-out: The new element enters the transition first, and the current element transitions out after completion.

2. Out-in: The current element transitions out first, and the new element transitions in after the exit is completed.

I’m not going to look at it. I’m going to use it.

Write code in app.vue

<template>
  <div id="app">
    <transition name="slide-left" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>


<style>
.slide-left-enter {
    opacity: 0;
    -webkit-transform: translate(30px.0);
    transform: translate(30px.0);
  }
  .slide-left-enter-active{
    transition: all .5s ease;
  }
  .slide-left-leave-to{
    opacity: 0;
    -webkit-transform: translate(-30px.0);
    transform: translate(-30px.0);
  }
  .slide-left-leave-active {
    transition: all .5s ease;
  }
</style>
Copy the code

Vue Routing transition dynamic Effect – Jade_g – Cnblogs.com

Ps: originally wanted to see the big guy’s notes to sort out their own experience, big guy wrote too good, direct handling, only for your reference study.