vue文檔:
https://cn.vuejs.org/v2/guide/transitions.html

 <template>
  <div>
    <transition name='fade'>
      <div  class="modal-bg animate__fadeInDownBig" v-show="show">
      </div>
    </transition>
    <transition-group name='bounce'>
      <div key="0" class="bounce-msg-box" v-show="show">
        <div  class="bg-box">
          <div  class="modal-container animate__animated animate__fadeInDownBig">
            <h3  class="modal-header">
              {{title}}
            </h3>
            <div class="modal-main">
              <slot></slot>
            </div>
            <div key="4" class="modal-footer">
              <div class="close-btn" @click="close">關(guān) 閉</div>
            </div>
          </div>
        </div>
      </div>
    </transition-group>
  </div>

</template>
<script>
export default {
  name: 'modal',
  data() {
    return {}
  },
  props: {
    show: {    // 控制彈窗展示
      type: Boolean,
      default: false,
      required: true,   // 必傳遞
    },
    title: {
      type: String,
      default: 'title',
    }
  },
  methods: {
    // 通過(guò)事件綁定及$emit來(lái)執(zhí)行父組件的方法，改變彈窗展示狀態(tài)
    close() {
      this.$emit("hideModal");
    },
    submit() {
      this.$emit("submit");
    }
  }
}
</script>
<style lang="less">
.modal-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2;
  display: flex;
  justify-content: center;
}
.bounce-msg-box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
}
.modal-container {
  display: flex;
  flex-direction: column;
  width: 50%;
  margin: 0 auto;
  height: auto;
  background-color: rgba(0, 21, 41, 0.5);
  padding: 20px;
}

.bg-box {
  width: 100%;
}
.modal-header {
  color: #fff;
  text-align: center;
  margin: 0;
  text-align: center;
  font-size: 2.4em;
  font-weight: 300;
  opacity: 0.8;
  border-radius: 3px 3px 0 0;
}
.modal-main {
  padding: 20px 40px;
  color: rgb(238, 238, 238);
  p {
    line-height: 1.4em;
  }
  h2 {
    color: rgb(0, 201, 252);
  }
  h3 {
    color: rgb(168, 223, 255);
  }
  h2:not(:first-child) {
    margin-top: 20px;
    font-weight: 600;
  }
}
.modal-footer {
  height: 60px;
  display: flex;
  justify-content: center;
  align-item: center;
  border-top: 1px solid rgb(24, 30, 63);
}
.modal-footer button {
  width: 100px;
}
.close-btn {
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100px;
  justify-content: center;
}
/*從上到下*/
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate(0, -1000px); /* Safari */
    transform: stranslate(0, -1000px); /* 標(biāo)準(zhǔn)語(yǔ)法 */
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0); /* Safari */
    transform: stranslate(0); /* 標(biāo)準(zhǔn)語(yǔ)法 */
  }
}

@-webkit-keyframes fadeInDown /* Safari 與 Chrome */ {
  from {
    opacity: 0;
    -webkit-transform: translate(0, -1000px); /* Safari */
    transform: stranslate(0, -1000px); /* 標(biāo)準(zhǔn)語(yǔ)法 */
  }
  to {
    opacity: 1;
    -webkit-transform: translate(0); /* Safari */
    transform: stranslate(0); /* 標(biāo)準(zhǔn)語(yǔ)法 */
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.bounce-enter-active {
  animation: fadeInDown 0.5s;
}
.bounce-leave-active {
  animation: fadeInDown 0.5s reverse;
}
</style>

制作心得：
1、遮罩層的動(dòng)畫(huà)要和彈窗的分開(kāi)，不然很丑，也不是我們要的效果。
2、使用關(guān)鍵幀動(dòng)畫(huà)animation: fadeInDown 很方便
3、reverse反向播放很方便