<template>
  <div>
    <div class="a" v-for="(item,index) in items">
      <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.show[i] = false;
      }
    },
    methods: {
      btn(id) {
        this.show[id] = !this.show[id];
        console.log(this.show);
      }
    }
  }
</script>
<style>
  .a {
    width: 500px;
    margin: 0 auto;
    border: 1px solid;
  }

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

  /* 可以設(shè)置不同的進入和離開動畫 */
  /* 設(shè)置持續(xù)時間和動畫函數(shù) */
  .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
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(10px);
    opacity: 0;
  }
</style>

當我點擊一個按鈕的時候我想要一個div顯示出來