Javascript 当“属性显示”更改为“无”时，如何添加动画？

更换元素时如何在vue应用程序中添加信息？我想这样做，当您单击例如带有“Num 1”的div时，带有class='showing'的div不会突然消失，而是平稳地消失，例如，转到侧面或任何其他方式，是否有方法这样做？或者，随着课程的改变，我无法达到所需的平滑度
我的代码：

数字1
数字2
数字3
kldmf
klsfdmn
导出默认值{
名称：“地图”，
数据（）{
返回{
第一条：错，
公开2：错误，
opened3:false，}
}
安装的（）{
方法：{
openpav（一）{
如果（i==1）{
this.opened1=true
this.opened2=false
this.opened3=false
}
如果（i==2）{
this.opened1=false
this.opened2=true
this.opened3=false
}
如果（i==3）{
this.opened1=false
this.opened2=false
this.opened3=true
}
}
}
}
.1{
显示：无；
}
.pavopen1{
显示：块；
}
.展示{
显示器：flex；
弯曲方向：立柱；
}
.展示室{
显示：无；
}

您不需要检查动画何时以setInterval结束，您可以查找事件animationend

下面是一个简单的示例，其中div变为不透明度：在10秒内变为0，然后显示设置为无

constdiv=document.querySelector（'div'）；
div.addEventListener（'animationend'，函数（）{div.style.display='none'；animation=''；}）；

div{
动画：淡入10秒1；
动画填充模式：正向；
}
@关键帧淡入淡出{
0% {
不透明度：1；
}
100% {
不透明度：0；
}
}

---

您好

据我所知，如果要将显示设置为“无”，则无法为元素设置动画。最好是设置不透明度动画，完成后，将“显示”设置为“无”。@Ishettyl能否请您澄清如何仅在不透明度为0时将“显示”设置为“无”？通过“监视”功能？或者设置间隔，以便在r不透明度为0？

<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;
}