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
网友评论