黑马程序员技术交流社区
标题:
【上海校区】钩子函数实现小球弹落
[打印本页]
作者:
梦缠绕的时候
时间:
2019-11-6 10:36
标题:
【上海校区】钩子函数实现小球弹落
钩子函数实现小球弹落
.ball {
width
: 15px;
height
: 15px;
border-radius
: 50%;
background-color
: red; }
<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>
// 创建 Vue 实例，得到 ViewModel
var
vm =
new
Vue({
el
:
'#app'
,
data
: {
flag
:
false
},
methods
: {
// 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
// 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
beforeEnter(el){
// beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
// 设置小球开始动画之前的，起始位置
el.style.transform =
"translate(0, 0)"
}, enter(el, done){
// 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
// 可以认为 el.offsetWidth 会强制动画刷新
el.offsetWidth
// enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
el.style.transform =
"translate(150px, 450px)"
el.style.transition =
'all 1s ease'
// 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
done() }, afterEnter(el){
// 动画完成之后，会调用 afterEnter
// console.log('ok')
this
.flag = !
this
.flag } } });
作者:
梦缠绕的时候
时间:
2019-11-6 10:36
有任何问题欢迎在评论区留言
作者:
梦缠绕的时候
时间:
2019-11-6 10:36
或者添加学姐微信
DKA-2018
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2