JSFiddle - React, Tailwind, and code Playground

by Chris Fritz

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <transition>
    <button 
      v-if="isEditing"
      v-on:click="isEditing = false"
    >
      Save
    </button>
    <button 
      v-else 
      v-on:click="isEditing = true"
    >
      Edit
    </button>
  </transition>
  
  <p>
    When clicking on the <code>&lt;button&gt;</code> above, the transition is never applied because Vue is reusing the same element for render efficiency. To force Vue to treat these as separate elements, a <a href="https://jsfiddle.net/chrisvfritz/tf2pjsc9/" target="_blank">unique <code>key</code> must be added</a> to each conditional element. 
  </p>
</div>

CSS

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

JavaScript

new Vue({
	el: '#app',
  data: {
  	isEditing: false
  }
})