<div id="app">
<div class="wrap mt-4">
<div class="box mb-4" :class="{'rotate': trigger }"></div>
<button class="btn btn-outline-primary" style="width:100px;"@click="trigger = !trigger">Counter</button>
</div>
</div>.size{
font-size: 30px;
font-weight: 600;
}
.wrap{
max-width: 400px;
margin-left:auto;
margin-right:auto;
text-align: center;
display: flex;
flex-direction: column;
}
.box{
width: 100px;
height: 100px;
outline:1px solid black;
transition:all .5s;
}
.rotate{
transform: rotate(45deg);
}
var app = new Vue({
el:'#app',
data:{
trigger:false
},
watch:{
trigger: function(){
var vm = this;
setTimeout(()=>{
vm.trigger = false;
}, 1000);
}
}
})