Vue is a popular front-end framework, and the implementation of transition animation is an important feature. In Vue, using transition animations can provide users with a more friendly user experience. Next, I will introduce to you how to implement transition animation in Vue.
1. Do you know what transition animation is?
Transition animation refers to an animation effect that makes the change look smoother and more natural by adding transition effects when a DOM element changes from one state to another. In Vue, transition animations can be applied to the following scenarios:
-
Show and hide elements
-
Dynamically add or remove elements
-
change in element position
2. Implementation method of Vue transition animation
2.1 CSS transitions
Vue provides transition components to support transition animations. We can wrap a component outside the element that needs to apply transition animation transition , and realize the effect of transition animation by setting CSS style or binding dynamic class.
Vue's transition animations are implemented by adding CSS class names. We can control the display and hiding of elements by adding v-if or instructions for elements that need transition , and then use components to set animation effects.v-showtransition
Let me write an example for your reference, I will add a transition animation effect to the button:
<template>
<button @click="show=!show">Toggle</button>
<transition name="fade">
<div v-if="show">Hello, World!</div>
</transition>
</template>
<script>
export default {
data() {
return {
show: false
};
}
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>In the above code ideas, we use instructions on transition the wrapped elements to control the display and hiding of elements. At the same time, we added a property to the component and used CSS styles to define the effect of the transition animation. Among them, and respectively represent the transition animation when entering and leaving, and and represent the style of the element when entering and leaving respectively.div v-iftransition name .fade-enter-active.fade-leave-active .fade-enter.fade-leave-to
2.2 JS transition
In addition to using CSS transitions, JavaScript transitions can also be used in Vue to achieve animation effects. The advantage of JS transition over CSS transition is that it can control transition animation more flexibly.
It is different from CSS transition, Javascript transition can control the transition animation more flexibly, and can achieve richer effects. Vue provides event hook functions that allow us to customize the effects of transition animations.
The following event hook functions are provided in Vue:
-
before-enter -
enter -
after-enter -
enter-cancelled -
before-leave -
leave -
after-leave -
leave-cancelled
We can use the properties transition of the component mode to set the transition mode. If the property is used mode , Vue will automatically call the corresponding hook function, and we can customize the transition effect through these hook functions.
The following is a demo demo I wrote based on JS transition, we will add custom transition animation to the button:
<template>
<button @click="show=!show">Toggle</button>
<transition :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<div v-if="show">Hello, World!</div>
</transition>
</template>
<script>
export default {
data() {
return {
show: false
};
},
methods: {
beforeEnter(el) {
el.style.opacity = 0;
el.style.transformOrigin = 'left';
},
enter(el, done) {
anime({
targets: el,
opacity: 1,
translateX: [20, 0],
easing: 'easeInOutQuad',
duration: 500,
complete: done
});
},
leave(el, done) {
anime({
targets: el,
opacity: 0,
translateX: [-20, 0],
easing: 'easeInOutQuad',
duration: 500,
complete: done
});
}
}
};
</script> In the above front-end page, we disabled the CSS transition by setting the property transition of the component to , and then we used hook functions such as , , and , to customize the transition animation. In this sample code, we use the third-party animation library Anime.js to realize the animation effect when the element enters and leaves. At the same time, after the animation is completed, we need to manually call the function to notify Vue that the transition animation has completed.css false before-enterenter leaveanime done
3. Summarize
Through the introduction of this article I wrote, you can learn more about the basic concept of Vue transition animation, and master how to implement transition animation in Vue. Whether using CSS transitions or JavaScript transitions can help us provide users with a more user-friendly experience.