English

VueJS Tutorial

VueJS - Transition and Animation

Introduction

Hello there, future Vue.js wizards! ? I'm thrilled to be your guide on this exciting journey through the magical world of transitions and animations in Vue.js. As someone who's been teaching computer science for years, I can tell you that adding smooth transitions and eye-catching animations to your web applications is like adding sprinkles to a cupcake – it makes everything more delightful!

VueJS - Transition & Animation

Now, don't worry if you're new to programming. We'll start from the very basics and work our way up. By the end of this tutorial, you'll be creating animations that'll make your friends say, "Wow, how did you do that?" So, let's dive in!

Transition

What is a Transition?

In the world of web development, a transition is like a smooth change from one state to another. Imagine a light switch that doesn't just turn on and off abruptly, but instead gradually brightens or dims. That's the essence of a transition!

Basic Transition Example

Let's start with a simple example. We'll create a button that, when clicked, shows or hides a message with a smooth fade effect.

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello, I'm a transitioning message!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

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

Let's break this down:

  1. We have a button that toggles the show variable when clicked.
  2. The <transition> component wraps our message, with a name attribute set to "fade".
  3. The v-if directive on the paragraph shows or hides it based on the show variable.
  4. In the <style> section, we define our transition classes:
    • .fade-enter-active and .fade-leave-active set the transition duration to 0.5 seconds.
    • .fade-enter and .fade-leave-to set the initial and final opacity to 0 (invisible).

When you click the button, the message will fade in and out smoothly. Isn't that cool?

Animation

What's the Difference Between Transition and Animation?

While transitions are great for simple state changes, animations allow for more complex, multi-step effects. If a transition is like smoothly dimming a light, an animation is like a light show with multiple colors and patterns!

Basic Animation Example

Let's create a bouncing ball animation:

<template>
  <div>
    <button @click="show = !show">Bounce!</button>
    <transition name="bounce">
      <p v-if="show">?</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

<style>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>

In this example:

  1. We use the same button toggle mechanism as before.
  2. The <transition> component now has the name "bounce".
  3. In the <style> section, we define:
    • .bounce-enter-active applies the bounce-in animation.
    • .bounce-leave-active applies the same animation in reverse.
    • The @keyframes rule defines our bounce-in animation with three steps.

When you click the button, the ball will appear with a bouncy effect and disappear with a reverse bounce. Fun, right?

Custom Transition Classes

Vue.js gives us the flexibility to use custom CSS classes for our transitions. This is super useful when you want to use third-party CSS animation libraries like Animate.css.

Here's how you can use custom classes:

<template>
  <div>
    <button @click="show = !show">Animate!</button>
    <transition
      enter-active-class="animated fadeInDown"
      leave-active-class="animated fadeOutUp"
    >
      <p v-if="show">? To infinity and beyond!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

<style>
/* Assume we've imported Animate.css here */
</style>

In this example, we're using Animate.css classes directly in our <transition> component. The enter-active-class and leave-active-class attributes allow us to specify custom classes for the enter and leave animations.

Explicit Transition Duration

Sometimes, you might want to explicitly set how long a transition or animation should last. Vue.js lets you do this with the :duration prop:

<template>
  <div>
    <button @click="show = !show">Slow Motion</button>
    <transition :duration="1000">
      <p v-if="show">I'm moving in slow motion...</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

<style>
.v-enter-active, .v-leave-active {
  transition: all 1s;
}
.v-enter, .v-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

Here, we set the duration to 1000 milliseconds (1 second) for both enter and leave transitions. You can also set different durations for enter and leave:

<transition :duration="{ enter: 500, leave: 800 }">
  <!-- ... -->
</transition>

JavaScript Hooks

For even more control over your transitions, Vue.js provides JavaScript hooks. These are like little helpers that let you run code at specific points during a transition.

Here's an example:

<template>
  <div>
    <button @click="show = !show">Animate</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
    >
      <p v-if="show">? I'm controlled by JavaScript!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    beforeEnter(el) {
      console.log('Before enter');
    },
    enter(el, done) {
      console.log('Enter');
      done();
    },
    afterEnter(el) {
      console.log('After enter');
    },
    enterCancelled(el) {
      console.log('Enter cancelled');
    },
    beforeLeave(el) {
      console.log('Before leave');
    },
    leave(el, done) {
      console.log('Leave');
      done();
    },
    afterLeave(el) {
      console.log('After leave');
    },
    leaveCancelled(el) {
      console.log('Leave cancelled');
    }
  }
}
</script>

These hooks give you precise control over the transition process. You can use them to trigger other animations, update data, or perform any other actions at specific points during the transition.

Transition at the Initial Render

By default, transitions in Vue.js only occur when an element is inserted into or removed from the DOM. But what if you want an element to transition on the initial render? Vue.js has got you covered with the appear attribute:

<template>
  <div>
    <transition appear>
      <p>? I appear with a transition!</p>
    </transition>
  </div>
</template>

<style>
.v-enter-active {
  transition: all .3s ease;
}
.v-enter {
  opacity: 0;
  transform: translateY(-20px);
}
</style>

With the appear attribute, the element will transition in when the component is first rendered.

Animation on Components

Last but not least, let's talk about animating components. The great news is that you can use all the transition features we've discussed on your custom components too!

<template>
  <div>
    <button @click="toggleComponent">Switch Component</button>
    <transition name="fade" mode="out-in">
      <component :is="currentComponent"></component>
    </transition>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    }
  }
}
</script>

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

In this example, we're switching between two components with a fade transition. The mode="out-in" attribute ensures that the old component transitions out before the new one transitions in.

Conclusion

Wow, we've covered a lot of ground! From basic transitions to complex animations, custom classes to JavaScript hooks, and even component animations. Remember, the key to mastering these concepts is practice. So go ahead, experiment with these examples, mix and match different techniques, and most importantly, have fun!

Animation and transitions can really bring your Vue.js applications to life. They're not just about looking pretty (although that's certainly a plus!) – they can also improve user experience by providing visual feedback and guiding users through your application.

Keep exploring, keep creating, and before you know it, you'll be the animation guru in your development team. Happy coding, future Vue.js masters! ?✨

Method Description
transition Wraps an element or component to apply enter/leave transitions
animation Defines a reusable animation that can be applied to elements
enter-active-class Specifies a custom CSS class for the enter transition
leave-active-class Specifies a custom CSS class for the leave transition
:duration Sets the duration of a transition
@before-enter JavaScript hook called before the enter transition starts
@enter JavaScript hook called when the enter transition starts
@after-enter JavaScript hook called after the enter transition is finished
@enter-cancelled JavaScript hook called when the enter transition is cancelled
@before-leave JavaScript hook called before the leave transition starts
@leave JavaScript hook called when the leave transition starts
@after-leave JavaScript hook called after the leave transition is finished
@leave-cancelled JavaScript hook called when the leave transition is cancelled
appear Applies a transition on the initial render of an element
mode Specifies the timing of leave/enter transitions

Credits: Image by storyset

Previous Tutorial:
VueJS - Rendering
Next Tutorial:
VueJS - Directives