JSFiddle - React, Tailwind, and code Playground

by wostex

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
    <transition mode="out-in">
      <div v-if="show" class="slide-1" key="1">
        <h1>Слайд 1</h1> 
      </div>
      <div v-else class="slide-2" key="2">
        <h1>Слайд 2</h1>
      </div>
    </transition>
    <button @click="onClickNext">Next</button>
    <button @click="onClickPrev">Prev</button>
</div>

CSS

.slide-1 {
  color: blue;
}

.slide-2 {
  color: red;
}

.v-enter-active, .v-leave-active {
  transition: opacity 1s
}
.v-enter, .v-leave-to {
  opacity: 0
}

JavaScript

new Vue ({
	el: '#app',
  data: {
    show: true
  },
  methods: {
  	onClickNext: function () {
    	this.show = false
    },
    onClickPrev: function () {
    	this.show = true
    }
  }
})