<!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=adge">
<title>Document</title>
<script src="vue.js"></script>
<!--下面样式是画出一个小球-->
<style>
#ball{
width:15px;
height:15px;
background-color:red;
border-radius:50%;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="小球抛下去" @click="flag=!flag">
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div id="ball" v-show="flag"></div>
</transition>
</div>
</body>
<script>
//创建Vue实例，得到ViewModel
var vm=new Vue({
el:"#app",
data:{
flag:false
},
methods:{
beforeEnter(el){//小球开始动画之前的起始状态
el.style.transform="translate(0,0)" //给小球摆正位置
},
enter(el,done){//小球动画结束之后的结束状态
//这是固定写法，如果不写el.offsetWidth就无法实现动画效果,其他的el.offset**也行
el.offsetLeft
el.style.transform="translate(150px,300px)"
el.style.transition="all 1s ease"
//当动画执行完毕后，会自动调用done这个函数，这个done就是afterEnter函数的引用
done()
},
afterEnter(el){//小球动画结束之后的回调函数，用来做一些清理工作
this.flag=!this.flag
}
}
});
</script>
</html>
