- 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 { 150px; height: 180px; border: 1px solid blue; } .ball { 14px; height: 14px; border-radius: 50%; background-color: red; } input { 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>