Vue 2 transitions on child elements

by Ron Valstar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
  <button v-on:click="show=!show">{{show&&'hide'||'show'}}</button>
  <transition name="fade">
    <p v-if="show">hello <span>world</span></p>
  </transition>
</div>

CSS

body {
  font: 600 22px Arial, sans;
}

p span {
  color: red;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 1500ms linear;
}
.fade-leave-active {
  transition: opacity 500ms linear;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

.fade-enter-active span {
  transition: color 1500ms linear 1500ms;
}
.fade-enter span {
  color: black;
}

Babel + JSX

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