使用vue模擬購物車小球動畫
1.效果演示
image
2.相關代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue-2.4.0.js"></script>
<script src="../js/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.ball {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="快到碗裏來" @click="flage=!flage">
<!--1.使用transition元素 把小球包裹起來-->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div class="ball" v-show="flage"></div>
</transition>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flage: false
},
methods: {
//鉤子函數的第一個參數el:表示要執行動畫的那個元素 是個原生的js dom對象
//document.getElementById() 可以認爲他是通過這種方式獲取的
beforeEnter:function (el) {
//beforeEnter表示動畫入場之前 動畫開始 可以再beforeEnter中設置元素的起始樣式
//設置小球開始動畫以前的起始位置
el.style.transform="translate(0,0)";
},
enter:function (el,done) {
//這句話沒有實際的作用 但是不寫出不來效果
//el.offsetWidth可以認爲可以強制刷新動畫
el.offsetWidth
//enter表示動畫開始之後的樣式這裏可以設置小球完成動畫之後的結束狀態
el.style.transform="translate(150px,450px)";
el.style.transition="all 1s ease"
done()
},
afterEnter:function (el) {
//動畫完成後
this.flage=!this.flage;
}
}
})
</script>
</body>
</html>