<div id="app" class="app">
<div class="box" :class="{spin: spin}"></div>
<button @click="spin = true">Spin</button>
</div>
html, body {
display: grid;
justify-content: center;
align-content: center;
height: 100%;
font-family: sans-serif;
font-size: 1rem;
}
.app {
display: grid;
justify-items: center;
}
.box {
width: 100px;
height: 100px;
margin: 15px;
background-color: cadetblue;
}
.spin {
transform: rotate(360deg);
transition: 1s;
}
const app = Vue.createApp({
data: function () {
return {
spin: false
}
}
})
const vm = app.mount('#app')
This Pen doesn't use any external CSS resources.