JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="app">
          <transition name="fade" mode='out-in'>
              <div :key='Date.now()' class='ff'>
                {{ msg[cur] }}
              </div>
            </transition>
            <button @click="nextMsg">show msg</button>
</div>

CSS

.ff{
  /* display : inline-block */;
  border: solid 1px #333;
  width : 80px;
  padding:12px;
  margin : 12px;
}

.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: 1.25s;
}

.fade-enter-active {
  transition-delay: 1.25s;
}

.fade-enter, .fade-leave-active {
  opacity: 0;
}

Babel + JSX

new Vue({
  el: '#app',
  data: {
  cur:0 ,
  	msg : [
    	'msg 1' ,
    	'msg 2' ,
    	'msg 3' ,
    	'msg 4' ,
    	'msg 5' ,
    	'msg 6' ,
    ]
  },
  methods: {
  	nextMsg() {
    	let x = this.cur;
      x=x+1;
      if(x >= this.msg.length) x=0;
      this.cur = x;
    }
  }
})