- v-on:before-enter=“beforeEnter”入场动画之前执行beforeEnter方法
- v-on:enter=“enter”入场过程中执行的方法 v-on:after-enter=“afterEnter”入场后执行的方法
- v-on:after-leave=“afterLeave”离场结束后执行的方法
<!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="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.min.js"></script>
<style>
html,
body {
padding: 0;
margin: 0;
}
#app {
width: 150px;
height: 180px;
border: 1px solid blue;
}
.ball {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: red;
}
input {
width: 80px;
height: 30px;
}
</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>
// 创建 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)"),
console.log("动画开始---");
},
enter(el, done) {
// 注意：这句话，没有实际的作用，但是，如果不写，出不来动画效果；
// 可以认为 el.offsetWidth 会强制动画刷新
el.offsetWidth;
// enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
el.style.transform = "translate(150px, 150px)";
(el.style.transition = "all 5s ease"), console.log("动画执行中---");
// 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
done();
},
afterEnter(el) {
// 动画完成之后，会调用 afterEnter
// console.log('ok')
this.flag = !this.flag;
console.log("动画执行完---");
},
},
});
</script>
</body>
</html>
