JSFiddle - React, Tailwind, and code Playground

by busy he

HTML

<div id="app">
    <transition name="pro-right">
        <div v-show="isShow" @click="isShow = false" class="box">yes</div>
    </transition>
    <transition name="pro-left">
        <div v-show="!isShow" @click="isShow = true" class="box">no</div>
    </transition>
</div>

CSS

.pro-right-enter-active, .pro-right-leave-active, .pro-left-enter-active, .pro-left-leave-active {
    transition: all .5s;
}
.pro-right-enter, .pro-right-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
.pro-left-enter, .pro-left-leave-to {
    opacity: 0;
    transform: translateX(-30px);
    }
.box {
    width: 100px;
    background-color: #fa6175
}

JavaScript

new Vue({
	el: '#app',
    data: {
    	isShow: false
  	}
})