划重点
- Vue 动画:transition / transform
- 在动画周期中执行动动画(上一篇是通过动画样式控制动画)
清蒸扇贝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.6.10.js"></script>
<style>
/*
动画的几个周期:
开始阶段:
v-enter :开始动画前 (这是一个时间点)
v-enter-active: 执行动画中...
v-enter-to:开始动画执行后 (这是一个时间点)
离开阶段:
v-leave:离开动画前 (这是一个时间点)
v-leave-active: 离开动画的过程中...
v-leave-to: 离开动画之后,离开的终止状态 这个时候元素动画已经结束了 (这是一个时间点)
*/
.ball {
width: 15px;
height: 15px;
/* 半径: */
border-radius: 50%;
background-color: red
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="快到碗里来" @click="flag=!flag">
<!-- 1:使用 transition 元素把小球包裹起来 -->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false,
flag2: false
},
methods: {
//注意: 动画钩子函数 的第一个参数:el :表示 要执行动画的那个DOM元素,是一个原生的JS DOM 对象 ;
//我们可以认为:el 是通过 document.getElementById('')方式获取到的 原生 JS DOM 对象
beforeEnter(el) {
//beforeEnter 表示动画入场之前; 这个时候;动画还没有开始;;; 可以在 beforeEnter 中设置元素开始动画之前的起始样式 / 起始位置
//设置 小球开始动画前的起始位置:
el.style.transform = "translate(100px,0)"
},
enter(el,done) {
//这句话没有太大的实际作用;但是不写的话;出不来动画的效果
//可以认为:el.offsetWidth
el.offsetWidth
//enter 表示动画开始之后 的样式,这里 可以设置小球完成动画之后的 结束状态
el.style.transform = "translate(150px,450px)"
el.style.transition = 'all 2s ease '
// done:回调函数 是必须的
//这里的done ;起始就是 afterEnter 这个函数,也就是说:done 是 afterEnter 函数的引用
done()
},
afterEnter(el) {
//动画 完成之后 ,,会回调 afterEnter
this.flag = !this.flag
}
}
})
</script>
</body>
</html>