VUE3 Basics Tutorial: Using Vue.js transitions and animations

Vue.js is a progressive framework for building user interfaces, in which the implementation of transitions and animations is very convenient. In this article, we'll cover how to use Vue.js transitions and animations, including how to style and trigger transition events.

Transition

In Vue.js, transition refers to adding animation effects to elements when they are inserted, updated, or removed. Vue.js implements transition through v-transition directive and transition component.

v-transition directive

The v-transition directive triggers the corresponding transition effect when an element is inserted, updated, or removed. Transition effects can be defined by setting the transition class name. For example, we can fade in when the element is inserted and fade out when the element is removed:

<div v-transition="'fade'">
  {{ message }}
</div>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

In the above example, we defined the .fade class name to represent the transition effect of the element. In the .fade-enter and .fade-leave-to classes, we set the opacity attribute to 0, indicating the starting and ending states of the element when it is inserted and removed. In the .fade-enter-active and .fade-leave-active classes, we set the transition attribute to indicate the time when the transition takes effect.

Transition component

The transition component can simplify the use of v-transition. Just place the element you want to transition in the transition component. For example, we can use different component names to define entering, leaving, and simultaneous transition effects:

<transition enter-active-class="fadeIn" leave-active-class="fadeOut">
  <div v-show="showDiv">{{ message }}</div>
</transition>

.fadeIn-enter-active, .fadeOut-leave-active {
  transition: opacity .5s;
}

.fadeIn-enter, .fadeOut-leave-to {
  opacity: 0;
}

.fadeOut-leave, .fadeIn-enter-to {
  opacity: 1;
}

In the above example, we use the transition component to simplify the setup of the transition effect. By setting the enter-active-class and leave-active-class properties, we define the transition effects for entering and leaving. At the same time, we define the start and end states of the element by setting the class names of fade-in and fade-out.

Animation

In Vue.js, animation (animation) refers to adding animation effects to elements when they are not inserted, updated, or removed. Vue.js implements animation through v-animation directives and animation components.

v-animation directive

The v-animation directive triggers the corresponding animation effect when the element is not inserted, updated, or removed. Animation effects can be defined by setting the animation class name. For example, we can scale the element when the mouse is hovering:

<div v-animation="'hoverScale'">
  {{ message }}
</div>

.hoverScale {
  transform: scale(1);
}

.hoverScale:hover {
  transform: scale(1.5);
}

In the above example, we defined the .hoverScale class name to represent the animation effect of the element. In the .hoverScale class, we set the transform attribute to indicate that the starting state of the element is its original size. In the .hoverScale:hover class, we set the transform property to magnify 1.5 times, indicating the end state of the element.

animation component

The animation component can simplify the use of v-animation. Just place the element you want to animate in the animation component. For example, we can use different component names to define different animation effects:

<animation name="rotate">
  <div>{{ message }}</div>
</animation>

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

.rotate {
  animation: rotate 1s infinite;
}

In the above example, we use the animation component to simplify the setting of animation effects. By setting the name attribute, we define the animation name as rotate. In the .rotate class, we set the animation property and define the properties and duration of the animation. In @keyframes, we set the start and end states of the animation.

Summary

Vue.js provides convenient transition and animation functions that can add vivid effects to the user interface. By using the v-transition directive and the transition component, we can define transition effects when elements are inserted, updated, or removed. By using the v-animation directive and the animation component, we can define animation effects when an element is not inserted, updated, or removed. I hope this tutorial will be helpful for you to learn transitions and animations in Vue.js!

The above is the detailed content of VUE3 Basics Tutorial: Using Vue.js transitions and animations. For more information, please follow other related articles on the PHP Chinese website!