• This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Vue provides a packaged component for Transition

V-if and V-show can control the display and hide of components, and animation is added to the display and hide process

I. 1. (Introduction) Here is a great example from vUE official website

<div id="demo">
  <button v-on:click="show = ! show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

<script>
new Vue({
  el: '#demo'.data: {
    show: true}})</script>
<style>
/*v is the name specified above */
.fade-enter-active..fade-leave-active {
  transition: opacity .5s;
}
.fade-enter..fade-leave-to {
  opacity: 0;
}
</style>
Copy the code

These are all transition class names

  1. V-enter-active: indicates the state when the transition takes effect. This class can be used to define the time when the transition takes effect
  2. V-leave-active: defines the status when the exit transition takes effect. The function is the same as above. One is inbound and the other is outbound
  3. V-enter: takes effect before the element is inserted (during insertion) and is removed in the next frame after the element is inserted.
  4. V-leave-to: Defines the transition at the end (after the insertion is complete) and removes after the transition/animation is complete.
  5. v-enter-to: Defines the end state of the transition. The next frame takes effect after the element is inserted (at the same timev-enterRemoved) after the transition/animation is complete.
  6. v-leave: Defines the beginning state of the exit transition. Immediately after the exit transition is triggered, the next frame is removed.

2. (Transitions) This is the basic usage, let’s change the CSS styles to make the transitions more cool

Transition: property duration timing-function delay; There are four parameters to choose from;

value describe
transition-property Specifies the name of the CSS property and the transition effect, which defaults to all.
transition-duration The transition effect takes a specified number of milliseconds to complete
transition-timing-function Specifies the rotation speed curve for the Transition effect, default ease (slow)
transition-delay Define when the Transition effect starts (a few seconds later)

This is an effect that slides out and in from the right while fading in and out

.fade-enter-active { transition: all .3s ease; }.fade leave-active {transition: all.8s cubic-bezier(1.0, 0.5, 0.8, 1.0); The cubic bezier() function defines a Cubic Bezier curve. 1. Control the end speed (more gentle) 2. Control the beginning speed (more urgent) 3. */}. Fade -enter,.fade-leave-to{transform: translateX(10px); opacity: 0; }Copy the code

3. (Animation) Here also only change the CSS animation style

Let’s start with the parameters of animation

value instructions
1.animation-name Specifies the name of the keyframe to bind to the selector
2.animation-duration The animation specifies how many seconds or milliseconds it takes to complete
3.animation-timing-function How will the set animation complete a cycle
4.animation-delay Set the animation delay interval.
5.animation-iteration-count Defines the number of times an animation is played.
6.animation-direction Specifies whether the animation should take turns playing backwards. Reverse
7.animation-fill-mode Specifies the style to be applied to an element when the animation does not play (when the animation is complete, or when the animation has a delay that does not start playing).
8.animation-play-state Specifies whether the animation is running or paused.

This is a zoom in and restore rebound animation

.fade-enter-active {
  animation: bounce-in .5s;
}
.fade-leave-active {
  animation: bounce-in .5sreverse; //reverse reverse playback}@keyframes bounce-in {
  0% {
    transform: scale(0);/* The initial 0 can't see */
  }
  50% {
    transform: scale(1.5);/ * * /
  }
  100% {
    transform: scale(1);/ * * /}}Copy the code

Second,Custom transition class name

There are several, the role of the same as the face should be about, is a higher priority than ordinary class name, mainly combined with Vue transition system and other third-party CSS animation library

  • enter-class
  • enter-active-class
  • enter-to-class 
  • leave-class
  • leave-active-class
  • leave-to-class
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">// References the third party CSS Animate library int.css<div id="example-3">
  <button @click="show = ! show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"// Move up and down as you enterleave-active-class="animated bounceOutRight"// All animations are defined by third-party libraries >
    <p v-if="show">hello</p>
  </transition>
</div>
Copy the code

Define the duration of transition

<transition :duration="1000">.</transition>// The duration of entry and exit can be customized:<transition :duration="{ enter: 500, leave: 800 }">.</transition>
Copy the code

Finally, you can declare JavaScript hooks in attributes (attributes) by clicking on the document

Above is the basic usage of animation, daily use of VUE animation is no problem, the following is advanced, interested students can continue to pay attention to oh, I will continue to update!!