Why does this simple transition on toggling elements with `v-if` not work?

Question

If i try a very simple example with two <div>'s, only one of which is showing at a time by using v-if, the out-in transition doesn't fade between them.

<div id="app">
  <transition name="fade" mode="out-in">
    <div v-if="(box==='a')">a</div>
    <div v-if="(box==='b')">b</div>
  </transition>

  <button @click="box='a'">show a</button>
  <button @click="box='b'">show b</button>
</div>

And my CSS code for the animation:

.fade-enter-active, .fade-leave-active {
    transition: opacity .3s ease;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

JSFiddle located here: https://jsfiddle.net/3ckto1am/1/

Answer 1

You can set the "div box" to a boolean value & then create a method which toggles the boolean between true/false like so:

Template:

<div id="app">
  <transition name="fade" mode="out-in">
    <div v-if="boxA" key="boxA">Div A</div>
    <div v-else key="boxB">Div B</div>
  </transition>
  
  <button @click="toggleBoxes">Toggle div boxes!</button>
</div>

JavaScript:

new Vue({
  el: "#app",
  data: {
    boxA: true
  },
  methods: {
    toggleBoxes() {
        this.boxA = !this.boxA;
    }
  }
})

Edit:

As for the <transition>, when toggling between elements that have the same tag name, you must tell Vue that they are distinct elements by giving them unique key attributes (key='<uniqueKey>') to the tag elements, you can read about it here.

You can check this working code sample.

However, if you still want to have two buttons to toggle the <div>, check this code instead.

Furthermore, I highly suggest you to read the official documentation on Conditional Rendering with Vuejs.