<div id="demo">
<transition name="no-mode-fade">
<button v-if="on" key="on" @click="on = false">
on
</button>
<button v-else key="off" @click="on = true">
off
</button>
</transition>
</div>
body {
margin: 30px;
}
.no-mode-fade-enter-active, .no-mode-fade-leave-active {
transition: opacity .5s
}
.no-mode-fade-enter-from, .no-mode-fade-leave-to {
opacity: 0
}
button {
background: #05ae7f;
border-radius: 4px;
display: inline-block;
border: none;
padding: 0.5rem 0.75rem;
text-decoration: none;
color: #ffffff;
font-family: sans-serif;
font-size: 1rem;
cursor: pointer;
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
}
View Compiled
const Demo = {
data() {
return {
on: false
}
}
}
Vue.createApp(Demo).mount('#demo')
View Compiled
This Pen doesn't use any external CSS resources.