JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="vue">
<button @click="toggle = !toggle">
Toggle
</button>
<transition>
  <div class="test" v-if="toggle">
  Hej!
  </div>
</transition>
</div>

CSS

.test{
  transition: opacity 1s, transform 1s;
}
.test.v-enter{
  opacity:0;
  transform:scale(0.5);
}
.test.v-leave-to{
  opacity:0;
  transform:scale(0.5);
}

Vue

new Vue({
	el:'#vue',
  data(){
  	return {
    	toggle:true
    }
  }
})