<div id="app">
<div class="container pt-5">
<div class="box mb-3" :class="{'active':isShow}">
<p class="text-center h1" :class="{'active':isShow}">恭喜你 <br>折扣碼1202</p>
</div>
<button class="btn btn-outline-danger" @click="isShow=!isShow">出現吧</button>
</div>
</div>
.box{
height: 100px;
width: 100px;
border:1px solid black;
background-color: #f00;
border-radius:50%;
margin-left: 0;
background-color: #eef;
transform: rotate(30000000000deg);
transition: all 5s 0s;
}
.box p{
opacity:0;
transition: all 5s 0s;
}
p.active{
opacity:1;
transition: all 3s 0s;
}
.box.active{
border-radius:0%;
width: 300px;
margin-left: 500px;
background-color: #fee;
transform: rotate(0deg);
transition: all 3s 0s;
}$(document).ready(function(e){
var app = new Vue({
el:'#app',
data:{
isShow:false
}
})
})