JSFiddle - React, Tailwind, and code Playground

by thierrymichel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.11/vue-router.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use v-link directive for navigation. -->
    <a v-link="{ path: '/' }">Go to Foo</a>
    <a v-link="{ path: '/bar' }">Go to Bar</a>
  </p>
  <!-- route outlet -->
  {{ transition | json }}
  <router-view class="view animated" transition="test" transition-mode="out-in"></router-view>
</div>

CSS

.animated {
  position: absolute;
}

Babel + JSX

var Foo = Vue.extend({
    template: '<p>This is foo!</p>'
})

var Bar = Vue.extend({
    template: '<p>This is bar!</p>'
})

var App = Vue.extend({
  data() {
    return {
      transition: {
      	in: '',
        out: ''
      }
    }
  }
})


var router = new VueRouter()

router.map({
    '/': {
        component: Foo
    },
    '/bar': {
        component: Bar
    }
})

var transitions = {
  '/bar': ['bounceInDown', 'flipOutX'],
  '/': ['zoomIn', 'zoomOut']
}

router.afterEach((transition) => {
	var t = transitions[transition.to.path]
  router.app.transition.in = t[0]
})

router.beforeEach((transition) => {
	var t = transitions[transition.from.path]
  if (t) router.app.transition.out = t[1]
  transition.next()
})

Vue.transition('test', {
	beforeEnter: function (el) {
  	el.classList.add(this.transition.in)
  },
  afterEnter: function (el) {
  	el.classList.remove(this.transition.in)
  },
  beforeLeave: function (el) {
  	el.classList.add(this.transition.out)
  },
  afterLeave: function (el) {
  	el.classList.remove(this.transition.out)
  }
})

// Now we can start the app!
// The router will create an instance of App and mount to
// the element matching the selector #app.
router.start(App, '#app')