Animating simple v-if directive in Vue

Question

Is it possible to animate, more specifically "fadeOut" a div when it is being removed/destroyed do to a v-if conditional?

I have the most basic conditional:

<template v-if="initProxy">
  <div class="page__boot">
  <div>
</template>

In my components data prop, when I set initProxy to false, I'd like to fadeOut the rendered div before its destroyed, rather than it just abruptly disappearing. I know I'm missing something so trivial... suggestions?

Answer 1

You should follow this basic example

<template>
  <transition name="fade">
    <div class="page__boot" v-if="initProxy">
    <div>
  </transition>
</template>

And adjust your animation:

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

Also you can change duration for .fade-leave-active