.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
}
}
});