How to use Vue to add and delete animation effects-Vue.js-php.cn

How to use Vue to add and delete animation effects

PHPz

Release： 2023-09-20 14:02:03

Original

835 people have browsed it

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.

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

Copy after login

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 //控制添加和删除动画的变量
  }
});

Copy after login

Add animation effects
Using Vue's transition component can easily implement animation effects. Within the <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>

Copy after login

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  element will have a class name named fade-enter, which will trigger the relevant CSS transition. Effect.

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;
}

Copy after login

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!