When you hover over the circular region on the website, the text and description in the red box will change.
To add a fade animation effect when the text changes, I attempted to use <transition> as per the documentation provided in this link.
Unfortunately, the transition effect is not working as expected.
App.vue
<template>
<div id="app">
<div
v-for="opt in options"
:key="opt.id"
class="item"
@mouseover="changeCurrentOption(opt.id)"
>
{{ opt.name }}
</div>
<div class="text">
<transition name="component-fade" mode="out-in">
<div class="title">{{ options[currentOption - 1].name }}</div>
</transition>
<transition name="component-fade" mode="out-in">
<div class="description">
{{ options[currentOption - 1].description }}
</div>
</transition>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
options: [
{
id: 1,
name: "Cat",
description:
"Lorem Ipsum is simply dummy text of... // (Continues similarly...)
},
// Additional data for Dog may be found here...
],
currentOption: 1,
};
},
methods: {
changeCurrentOption(id) {
this.currentOption = id;
},
},
};
</script>
<style lang="scss">
#app {
text-align: center;
margin-top: 60px;
.item {
width: 150px;
height: 150px;
border-radius: 50%;
border: 1px solid black;
margin-bottom: 1rem;
}
.text {
border: 1px solid red;
}
}
</style>
https://i.sstatic.net/Osh90.png
CodeSandbox:
https://codesandbox.io/s/hardcore-montalcini-dcyi2?file=/src/App.vue