Vue 3 - Animate.css library not animating DOM elements

Question

I'm trying to use animate.css in my vue project. I've imported the library in the main.js file

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');

And In my view I'm assigning the classes from the library to the elements I want to animate but without success, nothing happen.

<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>

The arrow on the cover will not be animated. For the text the same problem occur. Any suggestion to fix the code?Maybe I've made a mistake?

Daantje · Accepted Answer · 2021-03-27 13:28:29Z

1

It looks like you are missing the animate__animated class along whit the animation you want. This is form the documentation;

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!):

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

answered Mar 27, 2021 at 13:28

Daantje

2,51627 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

newbiedev Over a year ago

I need to check, I was thinking that it was an error I was made to import the library!Thank you

AnoRebel · Accepted Answer · 2021-03-27 13:18:40Z

1

I believe you missed a class. From their website for v4, Animate.css says:

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!)

answered Mar 27, 2021 at 13:18

AnoRebel

516 bronze badges

Comments

McKean · Accepted Answer · 2022-07-27 16:38:10Z

0

Using binding class and click method

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/[email protected]/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>

edited Jul 27, 2022 at 16:38

McKean

5206 silver badges15 bronze badges

answered Jul 25, 2022 at 10:32

Muhammad Fahmi

94 bronze badges

1 Comment

ahuemmer Over a year ago

Please don't post code-only answers but add a little textual explanation about how and why your approach works and what makes it different from the other answers given. You may also have a look at our "How to write a good answer" entry.

Collectives™ on Stack Overflow

Vue 3 - Animate.css library not animating DOM elements

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related