Vue page transition animation implementation and common animation effects

Vue is a popular JavaScript framework that uses a data-driven approach to assist developers in building single-page web applications with strong interactivity and beautiful data presentation. Vue has many useful features built-in, one of which is page transition animation. In this article, we will introduce how to use Vue’s transition animation function and discuss the most common animation effects.

Implementing Vue page transition animation

Vue’s page transition animation is through Vue’s <transition></transition> and <transition-group></transition-group> components realized. Below we introduce these two components respectively.

<transition></transition>

<transition></transition>The component can automatically perform transition animation effects when the wrapped element is inserted, updated, or removed.

This component emits before-enter, enter, after-enter, enter-cancelled and # to the outside. ##before-leave, leave, after-leave, leave-cancelled and other hook functions allow us to control the start, end and Cancel.

The following is a simple

animation effect, showing the transition animation of an element when inserted. Please note that this component requires a name attribute, which specifies the name of the animation. In the example below, the animation name is fade. The CSS style here defines the transition animation effect of the element at the beginning and end.

<template>
  <div>
    <button @click="show = !show">Toggle show</button>
    <transition name="fade">
      <div v-if="show">Hello Vue!</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

The component is very similar to , but it is suitable for Elements such as list items or tables that need to be inserted and removed at the same time.

Like the

component, hook functions can be defined in the component, such as before-enter , enter, etc.

You need to specify a tag attribute to specify the type of HTML tag generated by the transition component. It also requires each child element to have a unique key value so that Vue can correctly identify inserted, updated, or removed elements.

In the example below, we show a simple list that adds or removes an item every time a button is clicked. In this example, we use the

component and specify the HTML tag type as ul. Each item in the list comes with a key value to help Vue perform the transition animation correctly.

<template>
  <div>
    <button @click="shift()">Add/Remove Item</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item">{{ item }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
    };
  },
  methods: {
    shift() {
      if (this.items.length > 0) {
        this.items.shift();
      } else {
        this.items.push("New Item");
      }
    },
  },
};
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

Commonly used transition animation effects

Now, we have introduced how to use Vue’s transition animation. Let’s take a look at some common transition animation effects.

Fade

Fade effect is used to fade out or fade out. It changes the opacity of an element from 0 to 1 or from 1 to 0.

<transition name="fade">
  <div v-if="show">Hello Vue!</div>
</transition>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

Slide

SlideThe effect is used for elements to slide out or slide to one side. It moves the position of an element from one position to another.

<transition name="slide">
  <div v-if="show">Hello Vue!</div>
</transition>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter-to,
.slide-leave {
  transform: translateX(100%);
}
.slide-enter,
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

Scale

ScaleThe effect is used to scale elements from small to large or from large to small. It shrinks the width and height of an element from one size to another.

<template>
  <div>
    <button @click="show = !show">Toggle show</button>
    <transition name="scale">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.scale-enter-active,
.scale-leave-active {
  transition: transform 0.5s;
}
.scale-enter,
.scale-leave-to {
  transform: scale(0);
}
</style>

Rotate

RotateThe effect is used to rotate elements around an axis. It rotates the element around an angle.

<template>
  <div>
    <button @click="show = !show">Toggle show</button>
    <transition name="rotate">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.rotate-enter-active,
.rotate-leave-active {
  transition: transform 0.5s;
}
.rotate-enter,
.rotate-leave-to {
  transform: rotate(180deg);
}
</style>

Summary

Vue’s transition animation function allows us to add animated transition effects when page elements are inserted, updated, or removed, thereby making the page more vivid and interesting. This article introduces how to use Vue's

and components to implement transition animation, and also introduces several commonly used transition animation effects. If you need to add animation effects to your Vue application, you might as well try these components.

The above is the detailed content of Vue page transition animation implementation and common animation effects. For more information, please follow other related articles on the PHP Chinese website!