Page switching transition effect function application in Vue document

Vue is a popular front-end JavaScript framework for building dynamic and interactive web applications. In Vue, transition effects are an important part of page switching. Page switching transition effects can add a dynamic and smooth feeling to page switching, thereby improving user experience. A variety of transition effect functions are provided in the Vue documentation. This article will introduce how to use these functions in Vue applications.

1. Transition class name

The transition effect function in Vue is implemented by adding a specific class name to the class attribute of the element. The following are several common transition class names:

• v-enter: takes effect when the element is inserted, and can set the start state of the transition.
• v-enter-active: It takes effect when the element is inserted and is applied during the transition process. In transition or animation, it is used to define the duration, delay time and animation effect of the transition effect.
• v-enter-to: Effective when the element is inserted, you can set the end state of the transition.
• v-leave: Effective when the element is deleted, you can set the start state of the transition.
• v-leave-active: Takes effect when the element is deleted, applied during the transition process.
• v-leave-to: Effective when the element is deleted, you can set the end state of the transition.

2. Transition function

Vue provides multiple transition functions to meet different needs. The following are some commonly used transition functions:

• transition: Wrap the element or component that needs to be transitioned, where the name attribute specifies the static class prefix.
• transition-group: Wraps the list of elements or components that need to be transitioned, where the name attribute specifies the static class prefix.
• Dynamic transition function: In Vue, users can customize the transition function to achieve the effect they want. You can pass a dynamic name attribute to the transition or transition-group, and this name attribute can be returned by a function.

3. Practical Application

In order to better understand the application of Vue transition effect function, below we will create a simple Vue application and use it in it Transition effect function. Here we use Vue CLI to create a new Vue project. First, execute the following command in the terminal:

vue create my-app
cd my-app
npm run serve

Then, we can add the following code in the App.vue file:

<template>
  <div>
    <h1 id="title">{{ title }}</h1>
    <button @click="toggle">Toggle message</button>
    <transition name="fade">
      <p v-if="messageShown">Hello, Vue!</p>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Vue transition demo',
        messageShown: false,
      }
    },
    methods: {
      toggle() {
        this.messageShown = !this.messageShown;
      },
    },
  }
</script>

<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease-in-out;
  }

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

In the above code, we create a button and A Vue component for the paragraph element. When the user clicks the button, if the paragraph element is shown, hide it, otherwise show it. On the paragraph element, we use the transition component and pass fade as the value of the name attribute to the transition component. In addition, we also defined the .fade-enter-active, .fade-leave-active, .fade-enter and .fade-leave-to classes in the style tag as the formal implementation of the transition effect function.

Finally, we can preview our Vue application in the browser. When we click the "Toggle message" button, the paragraph element will disappear or appear smoothly, using the transition effect function we defined.

Summary

Vue provides a wealth of transition effect functions to achieve dynamic and smooth page switching effects. In addition to the transition and transition-group functions introduced above, Vue also provides more transition effect functions and dynamic transition functions to better meet different needs. In the process of using the transition function, the CSS style of the transition effect needs to be appropriately defined to achieve the desired effect.

The above is the detailed content of Page switching transition effect function application in Vue document. For more information, please follow other related articles on the PHP Chinese website!