VueJs如何结合Animate.css库实现模态框的进入与退出动画

你可以直接用Vue内置的过渡组件搭配Animate.css实现需求，无需手动控制类名切换和动画计时，修改后的代码如下：

完整修改后代码 #

template 部分 #

<template>
  <div class="backgroundImage" :style="{'background-image': 'url(' + require('../../assets/bkg.jpg') + ')'}">
    <div v-if="showModal" @click="closeModal"></div>
    <!-- Vue2版本请把<Transition>换成小写<transition> -->
    <Transition
      enter-active-class="animate__animated animate__bounceIn animate__slow"
      leave-active-class="animate__animated animate__bounceOut animate__slow"
    >
      <div class="modal" v-if="showModal">
        <img  id="synthesisFt" src="../../assets/popup-ftt.jpg" alt="Logo FunkTheTown" title="FunkTheTown" @click="closeModal"/>
      </div>
    </Transition>
    <div>
      <img class="logo-img" src="../../assets/logo.png" alt="Logo FunkTheTown" title="FunkTheTown" />
    </div>
  </div>
</template>

script 部分 #

<script>
export default {
  data () {
    return {
      showModal: false
    }
  },
  mounted:function(){
    this.popup() 
  },
  methods: {
    popup : function () {
      setTimeout(() => {
        this.showModal = true;
      }, 3000);
    },
    closeModal() {
      this.showModal = false
    }
  }
}
</script>

核心修改说明 #

• 用Vue内置的过渡组件包裹模态框元素，直接配置进入、离开阶段对应的Animate.css类即可自动匹配动画
• 过渡组件会自动监听动画完成事件，退出动画执行结束后才会卸载DOM元素，不会出现动画没跑完元素就消失的问题
• 如果你用的是Vue2版本，把<Transition>标签换成小写的<transition>即可正常使用

内容的提问来源于stack exchange，提问作者Hao73