Introduction:
Vue.js has always been known for its simplicity and flexibility, and with the release of Vue 3, developers have gained even more powerful tools to create dynamic and engaging user interfaces. One of the standout features in Vue 3 is its enhanced transition and animation system, providing developers with the ability to create smooth and visually appealing transitions between different states.
Understanding Vue 3 Transitions:
Vue 3 introduces the v-transition directive, making it easier than ever to implement transitions. Transitions are applied when an element enters or leaves the DOM. They provide a way to control how elements flow between different states.
<template>
<div>
<transition name="fade">
<p v-if="show">Hello, Vue 3!</p>
</transition>
<button @click="toggle">Toggle</button>
</div>
</template>
<script>
export default {
data() {
return {
show: true,
};
},
methods: {
toggle() {
this.show = !this.show;
},
},
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>In this example, the v-if directive toggles the visibility of the paragraph element, and the transition element encapsulates the content with the name “fade.” The corresponding CSS defines the transition effect, in this case, a fading effect over 0.5 seconds.
Transition Classes:
.fade-enter: Applied before the element is inserted into the DOM..fade-enter-active: Applied during the entire insertion phase..fade-enter-to: Applied after the element is inserted into the DOM.
Similar classes exist for leave transitions.
Group Transitions:
Vue 3 also supports group transitions for transitioning multiple elements simultaneously. Here’s an example:
<template>
<div>
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>
<button @click="addItem">Add Item</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [{ id: 1, text: 'Item 1' }],
};
},
methods: {
addItem() {
const newItem = { id: this.items.length + 1, text: `Item ${this.items.length + 1}` };
this.items.push(newItem);
},
},
};
</script>
<style>
.list-enter-active, .list-leave-active {
transition: transform 0.5s;
}
.list-enter, .list-leave-to {
transform: translateY(30px);
opacity: 0;
}
</style>In this example, the transition-group element wraps a list of items, and the transition effect is applied when items are added or removed.
Custom JavaScript Hooks:
Vue 3 allows developers to use custom JavaScript hooks to control the transition process. For example, you can use before-enter, enter, after-enter, before-leave, leave, and after-leave hooks to define custom logic during different transition phases.
<template>
<div>
<transition
name="custom"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<p v-if="show">Custom Transition</p>
</transition>
<button @click="toggle">Toggle</button>
</div>
</template>
<script>
export default {
data() {
return {
show: true,
};
},
methods: {
toggle() {
this.show = !this.show;
},
beforeEnter(el) {
// Before enter transition logic
el.style.transform = 'translateY(-30px)';
},
enter(el, done) {
// Enter transition logic
el.offsetHeight; // Trigger reflow
el.style.transition = 'transform 0.5s';
el.style.transform = 'translateY(0)';
done();
},
afterEnter(el) {
// After enter transition logic
el.style.transition = '';
el.style.transform = '';
},
},
};
</script>
<style>
.custom-enter-active {
transition: transform 0.5s;
}
</style>Staggering Transitions:
Staggering transitions provide a way to animate elements sequentially, creating a visually appealing effect. This can be achieved using the stagger property within a transition-group.
<template>
<div>
<transition-group name="stagger" tag="ul" @before-enter="beforeEnter">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>
<button @click="addItem">Add Item</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [{ id: 1, text: 'Item 1' }],
};
},
methods: {
addItem() {
const newItem = { id: this.items.length + 1, text: `Item ${this.items.length + 1}` };
this.items.push(newItem);
},
beforeEnter(el, done) {
el.style.opacity = 0;
el.style.transform = 'translateY(-20px)';
done();
},
},
};
</script>
<style>
.stagger-enter-active {
transition: opacity 0.5s, transform 0.5s;
}
.stagger-enter {
opacity: 1;
transform: translateY(0);
transition-delay: 0.1s; /* Delay each element */
}
</style>In this example, the stagger-enter class introduces a delay for each item, creating a staggered animation effect.
Dynamic Transitions:
Vue 3 allows for dynamic transitions by binding transition names and properties dynamically. This is useful when you want to switch between different transition effects based on application state.
<template>
<div>
<transition :name="transitionName">
<p v-if="show">{{ message }}</p>
</transition>
<button @click="toggle">Toggle Message</button>
</div>
</template>
<script>
export default {
data() {
return {
show: true,
message: 'Dynamic Transition Example',
transitionName: 'fade',
};
},
methods: {
toggle() {
this.show = !this.show;
this.transitionName = this.transitionName === 'fade' ? 'slide' : 'fade';
},
},
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.slide-enter-active, .slide-leave-active {
transition: transform 0.5s;
}
.slide-enter, .slide-leave-to {
transform: translateY(30px);
opacity: 0;
}
</style>Here, the transitionName variable dynamically changes between “fade” and “slide” transitions.
Transition Modes:
Vue 3 introduces transition modes, allowing you to control how entering and leaving transitions coexist. The modes are ‘in-out’ (default), ‘out-in’, and ‘in-out-out’. These modes determine the order of transition events when elements are toggled.
<template>
<div>
<transition :name="transitionName" mode="out-in">
<p :key="message">{{ message }}</p>
</transition>
<button @click="changeMessage">Change Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Transition Modes Example',
transitionName: 'fade',
};
},
methods: {
changeMessage() {
this.transitionName = this.transitionName === 'fade' ? 'slide' : 'fade';
this.message = this.message === 'Hello' ? 'Vue 3' : 'Hello';
},
},
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.slide-enter-active, .slide-leave-active {
transition: transform 0.5s;
}
.slide-enter, .slide-leave-to {
transform: translateY(30px);
opacity: 0;
}
</style>In this example, the mode="out-in" attribute ensures that the leaving transition completes before the entering transition starts when toggling the message.
Conclusion:
Vue 3’s transition and animation system offers developers a straightforward yet powerful way to enhance user interfaces with smooth and visually appealing effects. By leveraging the v-transition directive, understanding transition classes, incorporating group transitions, and utilizing custom JavaScript hooks, developers can create delightful user experiences with ease. Experiment with these examples, tweak the parameters, and unleash the full potential of Vue 3’s transition and animation capabilities in your projects.
