Learn custom Transition animation in Vue 3 to create cool page effects

In today’s Internet era, the coolness and personalization of page effects have become one of the important factors that attract users’ attention. In the field of front-end development, Vue 3, as a popular JavaScript framework, has excellent performance and flexibility, providing developers with a wealth of tools and APIs to achieve creative page effects. Among them, custom Transition animation is a very interesting and cool technology. This article will introduce how to learn and apply custom Transition animation in Vue 3 to create cool page effects.

First, let us understand what Transition animation in Vue 3 is. Transition animation is a transition effect implemented in Vue components, which allows components to be displayed in an animated manner when inserted, updated or removed. Vue 3 provides transition components and transition-group components to implement this function. The transition component is used to transition a single element, while the transition-group component can transition multiple elements.

In order to better learn and apply custom Transition animation, we first need to master some basic concepts and techniques. First, we need to understand the transition class names and events in Vue 3. The transition class name includes four states: enter (enter), leave (leave), enter transition (enter-to) and leave transition (leave-to). In the corresponding state, we can achieve animation effects by adding the corresponding class name.

Secondly, it is also very important to understand transition events. Transition events in Vue 3 can be divided into two categories: ordinary events and CSS events. The former includes events such as before-enter, enter, after-enter, before-leave, leave, after-leave, etc., and can perform corresponding operations at different stages of transition. The latter includes enter-active, leave-active and other events, which can be used to add or delete class names at the beginning and end of the animation, thereby triggering CSS animations. By combining transition class names and transition events, we can achieve a variety of custom Transition animation effects.

Next, let us use a simple example to demonstrate how to use Vue 3 to implement custom Transition animation. Suppose we have a button component. When the button is clicked, the button will be shown or hidden with a fade animation effect. First, we need to add the transition component to the template of the button component, and set the transition class name and transition event:

<template>
  <button @click="toggle" class="fade-button">
    {{ visible ? '隐藏' : '显示' }}
  </button>
  <transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
    <div v-if="visible" key="content" class="fade-content">
      欢迎来到炫酷的页面效果世界！
    </div>
  </transition>
</template>

In the click event of the button, we need to change a responsive data visible## The value of # is used to switch between showing or hiding the button:

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    toggle() {
      this.visible = !this.visible;
    },
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      el.offsetWidth; // 强制重绘
      el.style.opacity = 1;
      done();
    },
    leave(el, done) {
      el.style.opacity = 0;
      setTimeout(done, 1000); // 设置延时以等待动画结束
    }
  }
};
</script>

el parameter, and implement animation by changing its style Effect. At the end of the enter and leave events, we also notify Vue that the animation has been completed through the done function, so that the next step can be performed.

.fade-enter, .fade-leave, .fade-enter-to and .fade-leave- in the style sheet to class name, and define the transition effect through the transition attribute:

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

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

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

The above is the detailed content of Learn custom Transition animation in Vue 3 to create cool page effects. For more information, please follow other related articles on the PHP Chinese website!