Vue居中彈窗加vue動畫

<template>
  <div>
    <p @click="toggle" class="h4000">展示彈窗</p>
    
    <div class="box">
      <transition name="opacity">
        <div class="mask" @touchmove.prevent v-if="show" @click="toggle"></div>
      </transition>
      <transition name='bounce' :duration='50000'>
        <div class="content"  v-if="show">
          <div v-for="(item, i) in list" :key="i">內容區域</div>
        </div>
      </transition>
    </div>
  </div>
</template>
<style>
  .h4000{
    height: 4000px;
  }
  .mask{
    position: fixed;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10
  }
  .content{
    background-color: #ffffff;
    z-index: 20;
    position: fixed;
    width: 200px;
    max-height: 400px;
    overflow: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
  }
  .fade-enter, .fade-leave-to{
    opacity: 0
  }
  .fade-enter-active, .fade-leave-active{
    transition: opacity 3s;
  }
  .opacity-enter-active{
    animation: opacityIn 2s
  }
  .opacity-leave-active{
    animation: opacityOut 2s
  }
  @keyframes opacityIn {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
  @keyframes opacityOut {
    from {
      opacity: 1
    }
    to {
      opacity: 0
    }
  }
  .bounce-enter-active{
    animation: bounceIn 2s;
  }
  .bounce-leave-active{
    animation: bounceDown 2s
  }
  @keyframes bounceIn {
    from,
    60%,
    75%,
    90%,
    to{
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    from {
            opacity: 0;
            -webkit-transform: translate3d(0, 500px, 0);
            transform: translate3d(0, 500px, 0);
        }
        50% {
            opacity: 1;  
        }
        to {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
  }
  @keyframes bounceDown {
    from,
        60%,
        75%,
        90%,
        to {
            -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        from {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        to {
            opacity: 0;
            -webkit-transform: translate3d(0, 600px, 0);
            transform: translate3d(0, 600px, 0);
        }
  }
</style>
<script>
import Child from '../components/HelloWorld'
export default {
  data () {
    return {
      list: Array(100),
      show: true
    }
  },
  components: {
    Child
  },
  methods: {
    toggle () {
      console.log('1')
      this.show = !this.show
    },
    selectHandler () {
      console.log('Child select!')
    },
    clickHandler () {
      console.log('Child clicked!')
    }
  }
}
</script>