Vue 3 - Animate.css 库不为 DOM 元素设置动画

Question

我正在尝试在我的 vue 项目中使用 animate.css。我已将库导入 main.js 文件

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
//bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
//font-awesome
import '@fortawesome/fontawesome-free/css/all.min.css';
//animate.css
import 'animate.css';

createApp(App)
.use(router)
.mount('#app');

而且在我看来，我正在将库中的类分配给我想要设置动画的元素，但没有成功，没有任何反应。

<template>
  <div class="container-fluid p-0" id="content-wrapper">
    <!-- copertina pagina -->
    <div class="row m-0" id="cover-row">
      <div class="col-sm-12 col-md-12 col-lg-12 vh-100 p-0">
        <img class="img-fluid w-100 h-100" src="@/assets/cover.jpeg" id="cover-image">
        <span class="text-center position-absolute" id="cover-scroll">
          <a href="#travels" class="animate__slideOutDown animate__slower animate__delay-3s animate__repeat-3">
            <i class="fas fa-chevron-down"></i>
          </a>
        </span>
        <div class="overlay position-absolute"></div>
      </div>
    </div>
    
    <!-- descrizione progetto -->
    <div class="row m-0 mb-3 pt-5 pb-5 px-md-5" id="travels">
      <div class="col-sm-12 col-md-6 col-lg-6 text-center" id="">
        <img class="img-fluid w-75" src="@/assets/peoples.jpg">
      </div>
      <div class="col-sm-12 col-md-6 col-lg-6" id="">
        <h1 class="fw-bold mt-5 animate__fadeInDown">Escursioni in programma</h1>
        <h4 class="mb-5 animate__fadeInDown">
          ...
        </h4>
        <div class="d-grid gap-2">
          <button class="btn btn-primary btn-lg btn-block" @click.prevent="showIframe()">OPEN</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  methods: {
    showIframe() {
      this.$router.push({path: '/events'});
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');


#content-wrapper {
  font-family: 'Montserrat', sans-serif;
  background: white;
  #cover-row {
    #cover-image {
      object-fit: cover;
    }
    .overlay {
      height: 100vh;
      background: rgba(0,0,0,0.5);
      top: 0;
      left: 0;
      right: 0;
    }
    #cover-scroll {
      a {
        color: white !important;
      }
      z-index: 1;
      top: 85%;
      left: 0;
      right: 0;
    }
  }
}
</style>

封面上的箭头不会动画化。对于文本，也会出现同样的问题。有什么修复代码的建议吗？也许我弄错了？

Answer 1

我相信你错过了 class。从他们的 v4 网站上，Animate.css 说：

After installing Animate.css, add the class animate__animated to an element, along with any of the animation names(don't forget the animate__ prefix!)

Answer 2

您似乎缺少 animate__animated class 以及您想要的动画。这是文档的形式；

安装 Animate.css 后，将 class animate__animated 添加到元素，以及任何动画名称（不要忘记 animate__前缀！）：

<h1 class="animate__animated animate__bounce">An animated element</h1>

Vue 3 - Animate.css 库不为 DOM 元素设置动画

Vue 3 - Animate.css library not animating DOM elements

javascript

vue.js

animate.css