VueJs |如何将进出动画与库 Animate.css 结合起来？答案

【问题标题】：VueJs | How to combine a In and out animation with library Animate.css?VueJs |如何将进出动画与库 Animate.css 结合起来？
【发布时间】：2021-09-04 15:05:18
【问题描述】：

我从 VueJs 开始。

我想在模态中结合动画进出。我想我应该做一个功能，但找不到怎么做。

这是我的代码：

<template>
  <div class="backgroundImage" :style="{'background-image': 'url(' + require('../../assets/bkg.jpg') + ')'}">
  <div v-if="showModal" @click="showModal = false"></div>
  <div class="modal" v-if="showModal">
    <div class="animate__animated animate__bounceIn animate__slow">
    <img  id="synthesisFt" src="../../assets/popup-ftt.jpg" alt="Logo FunkTheTown" title="FunkTheTown" @click="showModal = false"/>
    </div> 
  </div>
   <div>
    <img class="logo-img" src="../../assets/logo.png" alt="Logo FunkTheTown" title="FunkTheTown" />
    </div>
    
 </div>

</template>

<script>
export default {
 data () {
  return {
   showModal: false
  }
 },
 mounted:function(){
        this.popup() 
  },


 methods: {
    popup : function () {
        setTimeout(() => {
        this.showModal = true;
        }, 3000);
    },

    // classChange : function () {

    //  showmodal = false;
    // }

 }
}

当我点击模态框时，我想使用 animate__animated animate__bounceOut。

【问题讨论】：

标签： vue.js animate.css

【解决方案1】：

我已经解决了这个问题，这里是代码：

<template>
  <div class="backgroundImage" :style="{'background-image': 'url(' + require('../../assets/bkg.jpg') + ')'}">
  <div v-if="showModal" @click="showModal = false"></div>
  <div class="modal" v-if="showModal">
    <div class="animate__animated animate__bounceIn animate__slow">
    <img  id="synthesisFt" src="../../assets/popup-ftt.jpg" alt="Logo FunkTheTown" title="FunkTheTown" @click="anim2()"/>
    </div> 
  </div>

  <div class="animate__animated animate__backInDown animate__slow" v-if="showModalLogin">
   <div class="modalLogin">
        <label>Login</label>
        <input class="loginInput" type="text" placeholder="email...">
        <label>Password</label>
        <input class="loginPassword" type="password" placeholder="password...">
        <button class="connexion">Connexion</button>
        <button class="join">Join</button>

    </div> 
  </div>
   <div>
    <img class="logo-img" src="../../assets/logo.png" alt="Logo FunkTheTown" title="FunkTheTown" />
    </div>
    <div class="animate__animated animate__rotateIn" v-if="showModalLogo" >

    <img class="full_logo" src="../../assets/F2T_logo_color.png" >

  </div>

   <div class="animate__animated animate__rotateIn" v-if="showModalLogo">

    <img class="full_logo_right" src="../../assets/F2T_logo_coloreverse.png" >

   </div>
    
 </div>

    
</template>

<script>
export default {
 data () {
  return {
   showModal: false,
   showModalLogin: false,
   showModalLogo:false,
  }
 },
 mounted:function(){
        this.popup() 
  },


 methods: {
    popup : function () {
        setTimeout(() => {
        this.showModal = true;
        }, 3000);
    },

    anim2 : function () {
        this.showModal= false;
        this.showModalLogin= true;
        this.showModalLogo =true;
        const element = document.querySelector('.logo-img');
        element.classList.add('animate__animated','animate__bounceOut');
    }

    // classChange : function () {

    //  showmodal = false;
    // }

 }
}

【讨论】：