Vue2 animation - hide and slide to the right after the component slides to the left
You can use the transition animation function of Vue.js to realize the hiding and displaying effect of components. In Vue.js 2.x version, you can do it through the following steps:
1. First, make sure you have installed Vue.js and related dependencies. If not installed, please install and import Vue.js first.
2. Add the content that needs to be hidden and displayed in the template tag of the component.
<template>
<div>
<transition name="slide">
<div class="animated-component" v-if="showComponent">
<!-- 这里放置需要隐藏和显示的组件或内容 -->
</div>
</transition>
</div>
</template>
3. Define CSS for transition effects in the style tag.
<style>
.slide-enter-active {
animation: slide-in 0.5s;
}
.slide-leave-active {
animation: slide-out 0.5s;
}
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes slide-out {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
</style>
4. Define the data attribute and methods method in the script tag of the component.
<script>
export default {
data() {
return {
showComponent: false
};
},
methods: {
toggleComponent() {
this.showComponent = !this.showComponent;
}
}
};
</script>
Now, when you call the toggleComponent method, the component will be hidden and shown with a sliding animation.
Note: The above example uses CSS animations, you can also use the transition class names provided by Vue.js (such as
fade-enter, fade-enter-active, fade-leave, fade-leave-active) and CSS transition properties (such as
transition, animation) to achieve other types of transition effects.