Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at creating transition effects between components and lists.
Transitioning Between Components
We can transition between components with the transition and component components.
The component component is used for switching between components dynamically by setting their name.
For instance, we can use it by writing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.bounce-enter-active {
animation: bounce-in 1.3s;
}
.bounce-leave-active {
animation: bounce-in 1.3s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.8);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<button @click="currentComponent = 'foo'">foo</button>
<button @click="currentComponent = 'bar'">bar</button>
<button @click="currentComponent = 'baz'">baz</button>
<transition name="bounce" mode="out-in">
<component :is="currentComponent"></component>
</transition>
</div>
<script>
const app = Vue.createApp({
data() {
return {
currentComponent: "foo"
};
},
components: {
foo: {
template: "<div>foo</div>"
},
bar: {
template: "<div>bar</div>"
},
baz: {
template: "<div>baz</div>"
}
}
});
app.mount("#app");
</script>
</body>
</html>
We created 3 components, foo , bar and baz .
And we to transition between them, we created 3 buttons to change the component names.
We also have the name prop and to set transition name.
And we also have the transition styles in the style tag.
When we click the buttons, we’ll see a transition effect before we see the content of the new component.
#programming #javascript #web-development #vue
