SOURCE

<template>
  <div class="msg_page">
    <div class="a" v-for="(item,index) in items" :key="index">
      <a @click="btn(index)" style="cursor: pointer" :key="1">点击</a>
      <transition name="slide-fade">
        <div class="b" v-if="show[index]" :key="2">

        </div>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      show: [],
      items: [
        {id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}
      ]
    }
  },
  mounted () {
    for (let i = 0; i < this.items.length; i++) {
      this.$set(this.show, i, false) // 使用this.$set
    }
  },
  methods: {
    btn (id) {
      this.$set(this.show, id, !this.show[id]) // 使用this.$set
      console.log(this.show)
    }
  }
}
</script>
<style>
.msg_page{
  position: fixed;
  top: 0;
  right: 0;
  z-index: 11;
}
  .a {
    width: 500px;
    margin: 0 auto;
    border: 1px solid;
  }

  .b {
    width: 100%;
    height: 100px;
    border: 1px solid;
  }

  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .3s ease;
  }

  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to{
    transform: translateX(10px);
    opacity: 0;
  }
</style>