Vue 3 - Библиотека Animate.css, не анимирующая элементы DOM

#javascript #vue.js #animate.css

Вопрос:

Я пытаюсь использовать animate.css в моем проекте vue. Я импортировал библиотеку в 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;700amp;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>

Стрелка на обложке не будет анимирована. Для текста возникает та же проблема. Есть предложения по исправлению кода?Может быть, я допустил ошибку?

Ответ №1:

Похоже, вам не хватает animate__animated класса вместе с нужной анимацией. Это форма документации;

После установки Animate.css добавьте класс animate__animated к элементу вместе с любым из имен анимации (не забудьте префикс animate__!):

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

Ответ №2:

Я полагаю, вы пропустили урок. С их веб-сайта для версии 4 Animate.css говорит:

После установки Animate.css добавьте класс animate__animated к элементу вместе с любым из имен анимации (не забудьте префикс animate__!)

Ответ №3:

Использование класса привязки и метода click

 const FontAwesomeAnimate = {
  data() {
    return {     
      reloadico: false,
    }
  },
  methods: {
    reload() {
      var self = this
      //stop after 5 sec
      setTimeout(function () { self.reloadico = false }, 5000)
      this.reloadico = true
    },
  }
}

Vue.createApp(FontAwesomeAnimate).mount('#animate-fa-vue')

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
<div class="row" id="animate-fa-vue">
  <div class="col-xl-6 col-lg-6">
    <div class="card shadow mb-4">
      <div class="card-header d-flex flex-row">
        <div>
          <div class="align-self-center">
            <h6 class="m-0 font-weight-bold">Click reload icon</h6>
          </div>
        </div>
        <div class="ml-auto">
          <i class="fas fa-refresh m-2 font-weight-bold" :class="{ 'fa-spin': reloadico }" v-on:click="reload()"></i>
        </div>
      </div>
    </div>
  </div>
</div>

Развернуть фрагмент