Animations in Vue.js

In Vue, we can implement animations using CSS animations, and transitions, or by using animation libraries.

Vue provides built-in support for adding animations to our components using CSS transitions or CSS animations.

Animations Use Cases in Vue:

Page Transitions: Animation Transitions help in providing a smooth navigation experience between different views or pages in our application.
Element Transitions: We can apply animations to our elements when they are added, removed, or updated in the DOM, making UI changes more visually appealing.
Component Animations: we can append animation to our components when they are mounted, updated, or destroyed from DOM. It creates dynamic and engaging user interfaces.

Here's how we can implement animations in Vue:

CSS Transitions:

CSS transitions allow us to smoothly animate changes to CSS properties. We can add or remove classes conditionally to trigger CSS transitions in Vue.

Example:

<template>
  <div>
    <button @click="addAnimation">Add Animation</button>
    <transition name="fade">
      <p v-if="isActive"> Applying Animation while element hiding from UI. </p>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.7s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  },
  methods: {
    addAnimation() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

CSS Animations:

Example:

<template>
  <div>
    <button @click="addAnimation">Add Animation</button>
    <div :class="{ 'bounceContent': isAnimationAdded }">
      This Content will move up and down on button click
    </div>
  </div>
</template>

<style>
@keyframes bounceContent {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}
.bounceContent {
  animation: bounceContent 2.0s;
}
</style>

<script>
export default {
  data() {
    return {
      isAnimationAdded: false
    };
  },
  methods: {
    addAnimation() {
      this.isAnimationAdded = true;
      setTimeout(() => {
       this.isAnimationAdded = false
      }, 2000)
    }
  }
};
</script>

CSS animations allow us to create more complex animations with keyframes. We can define CSS animations and apply them to elements in our Vue components.

Using the above example, we can move our content up and down with animation in Vue.js.

When we click on the `Add Animation` button will invoke `addAnimation` method and it will update the value of the `isAnimationAdded` property.

The `isAnimationAdded` property makes the `bounceContent` class active which binds to the `bounceContent` class in the element.

<-- Lifecycle Hooks

HTTP Request -->