Home >Web Front-end >Vue.js >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.
npm install vue
new Vue({ el: '#app', data: { show: false //控制添加和删除动画的变量 } });
<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.
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 -duration
property 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!