Vue — Animations

Transition component

<template>
  <button @click="show = !show">Toggle</button>
  <Transition name="fade">
    <p v-if="show">Hello!</p>
  </Transition>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

Slide transition

<Transition name="slide">
  <div v-if="show">Content</div>
</Transition>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter-from {
  transform: translateX(-100%);
}

.slide-leave-to {
  transform: translateX(100%);
}
</style>

TransitionGroup

<TransitionGroup name="list">
  <div v-for="item in items" :key="item.id">
    {{ item.name }}
  </div>
</TransitionGroup>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}
</style>

CSS animations

<Transition name="bounce">
  <p v-if="show">Bounce!</p>
</Transition>

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

JavaScript hooks

<Transition
  @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
>
  <div v-if="show">Content</div>
</Transition>

<script>
export default {
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
    },
    enter(el, done) {
      el.style.transition = 'opacity 0.5s'
      el.style.opacity = 1
      el.addEventListener('transitionend', done)
    },
    leave(el, done) {
      el.style.transition = 'opacity 0.5s'
      el.style.opacity = 0
      el.addEventListener('transitionend', done)
    }
  }
}
</script>

Mini Practice

1. Create a fade transition
2. Add slide animations
3. Use TransitionGroup for lists
4. Add JavaScript hooks

Up Next

Continue with Mixins - Code reuse.