vue半場動畫
！vue動畫也有生命周期
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
// ...
methods: {
// --------
// 進入中
// --------
beforeEnter: function (el) {
// ...
},
// 當與 CSS 結合使用時
// 回調函數 done 是可選的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 離開時
// --------
beforeLeave: function (el) {
// ...
},
// 當與 CSS 結合使用時
// 回調函數 done 是可選的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
自己的代碼 在傳enter的時候需要將done傳進去
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.ball{
margin-top: 10px;
margin-left: 30px;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: crimson;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="購物車" @click="flag = !flag" >
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
flag :'false'
},
methods:{
beforeEnter(el){
el.style.transform = "translate(0,0)"
},
enter(el,done){
//這句話沒有實際的作用，但是，如果不寫，寫不出來動畫效果
//可以認為 el.offsetWidth 會強制動畫刷新
el.offsetWidth
el.style.transform = "translate(150px,450px)"
el.style.transition = 'all 1s ease'
//這里的done，起始就是afterEnter這個函數，也就是說：done是afterEnter函數引用
done()
},
afterEnter(el){
this.flag =! this.flag
}
}
})
</script>
</body>
</html>
image.png
