JSFiddle - React, Tailwind, and code Playground

by fergal_doyle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.22/vue.js"></script>
<div>
  <div v-if="isActive"  transition="expand" class="test">AAA</div>
  <div v-if="isActive"  transition="expand" class="test">BBB</div>
</div>

CSS

.test {
  width: 0;
  overflow: hidden;
}

.test.expand-transition {
  transition: width .2s ease;
  width: 300px;                        
}

JavaScript

new Vue({
	el: 'body',
  data: {
  	isActive: false
  }
});