Is there a way to add animation in a Vue app when replacing elements? I would like the transition from, for example, clicking on a div with 'Num 1' to the divs with class 'showing' not disappear abruptly but smoothly, such as moving to the side or another method. Can this be achieved by changing classes, or is there a better way to achieve the desired smoothness?
<template>
<section class="maps" id="maps" style="">
<div class="showing" :class="{'showingopen':opened1||opened2||opened3||opened4||opened5||opened6||opened7}">
<div class="title py-2 px-2" @click="openpav(1)" :class="{'pav1':opened1}">Num 1</div>
<div class="title p-2" @click="openpav(2)" :class="{'pav2':opened2}" >Num 2</div>
<div class="title p-2" @click="openpav(3)" :class="{'pav3':opened3}">Num 3</div>
</div>
<div class="pav1" :class="{'pavopen1':opened1}">
<div>
kldmf
</div>
<div>
klsfdmn
</div>
</div>
</section>
</template>
<script>
export default {
name: "maps",
data() {
return {
opened1:false,
opened2:false,
opened3:false,}
}
mounted() {
methods: {
openpav(i){
if (i==1){
this.opened1 = true
this.opened2 = false
this.opened3 = false
}
if (i==2){
this.opened1 = false
this.opened2 = true
this.opened3 = false
}
if (i==3){
this.opened1 = false
this.opened2 = false
this.opened3 = true
}
}
}
}
<style scoped>
.pav1{
display: none;
}
.pavopen1{
display: block;
}
.showing{
display: flex ;
flex-direction: column;
}
.showingopen{
display: none;
}