JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-if="show" class="slide-1">
<transition>
<div>
<h1>Слайд 1</h1>
<button @click="onClickNext">Next</button>
</div>
</transition>
</div>
<div v-else class="slide-2">
<transition>
<div>
<h1>Слайд 2</h1>
<button @click="onClickPrev">Back</button>
</div>
</transition>
</div>
</div>
CSS
.slide-1 {
color: blue;
}
.slide-2 {
color: red;
}
.v-enter-active {
transition: opacity 1s;
}
.v-enter {
opacity: 0;
}
JavaScript
new Vue ({
el: '#app',
data: {
show: true
},
methods: {
onClickNext: function () {
this.show = false
},
onClickPrev: function () {
this.show = true
}
}
})