<div id="app">
<transition mode="in-out">
<button v-bind:key="isEditing" @click="isEditing = !isEditing">
{{ isEditing ? 'On' : 'Off' }}
</button>
</transition>
</div>
body {
padding: 60px;
}
button {
position: absolute;
outline: none;
border: none;
padding: 10px 15px;
border-radius: 5px;
background: #23547B;
color: #eee;
cursor: pointer;
}
.v-enter {
opacity: 0;
transform: translateX(100%);
}
.v-leave-to {
opacity: 0;
transform: translateX(-100%);
}
.v-enter-active,
.v-leave-active {
transition: 0.5s;
}
const vm = new Vue({
el: '#app',
data: {
isEditing: true,
},
});