How to use Vue to add and delete animation effects

How to use Vue to add and delete animation effects

In Vue.js, it is a common practice to implement animation by adding and deleting CSS class names. Vue provides some built-in instructions and transition components that can easily add and remove CSS class names on DOM elements to achieve various animation effects.

This article will introduce how to use animation effects in Vue projects through specific code examples.

1. Installing Vue
   First, make sure Vue.js is installed correctly. Vue.js can be installed by running the following command on the command line:

npm install vue

2. Create a Vue instance
   Create a Vue instance and add a variable to its data to control the addition and delete animation.

new Vue({
  el: '#app',
  data: {
    show: false //控制添加和删除动画的变量
  }
});

3. Add animation effects
   Using Vue's transition component can easily implement animation effects. Within the <transition></transition> tag, you can wrap the elements that need to be animated.

<div id="app">
  <button @click="show = !show">切换动画</button>
  <transition name="fade">
    <p v-if="show">这是一个动画效果</p>
  </transition>
</div>

In the above sample code, when the button is clicked, the value of the show variable will be switched to control the addition and deletion of animation. When show is true, the <p></p> element will have a class name named fade-enter, which will trigger the relevant CSS transition. Effect.

4. Define CSS animation
   In order to achieve real animation effects, relevant transition animations need to be defined in CSS. We can use several preset CSS class names of Vue to define transition animations.

In the above code, we used fade as the animation name.

.fade-enter-active,
.fade-leave-active {
  transition-duration: 0.5s;
}

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

In the above code, the .fade-enter-active and .fade-leave-active class names will trigger the transition effect, through transition -durationproperty to define the duration of the transition. The class names .fade-enter and .fade-leave-to are the start and end states of the transition.

Through the above code, we have implemented a simple example of adding and deleting animation effects. When the button is clicked, the text is shown and hidden with a fade-in and fade-out effect.

In addition to the fade effect, Vue also provides other transition class names and components to implement different types of transition animations.

Summary:
By adding and deleting the transition component of Vue.js and CSS class names, we can add and delete animation effects very simply. It should be noted that the corresponding transition animation class name is defined in CSS, and v-if or v-show is used in the Vue instance to control the addition and removal of animated elements. In this way, rich and diverse animation effects can be achieved.

The above is an introduction to how to use Vue to add and delete animation special effects. I hope it will be helpful to you. If you have any questions, please feel free to discuss.

The above is the detailed content of How to use Vue to add and delete animation effects. For more information, please follow other related articles on the PHP Chinese website!