VUE实例课程---7、动画钩子函数 VUE实例课程---7、动画钩子函数
一、总结
一句话总结：
动画钩子函数也就是用函数（用js控制css）来操作动画，动画钩子函数中可以更加方便的操作动画，比如只实现半场动画，像物品添加到购物车的动画
<div id="app"> <!-- 1. 使用 transition 元素把 小球包裹起来 --> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-show="isShow"></div> </transition> <br> <button @click="isShow=!isShow">添加到购物车</button> </div> <script src="../js/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { isShow: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') // 只设置半场动画的关键，让isShow在这个半场中由false依旧变成false //那么下次点击的时候依旧是从隐藏开始，依旧是进入的半场 this.isShow = !this.isShow; } } }); </script>
1、动画钩子函数分成两组，进场和离场，分别有哪些函数？
进场动画钩子函数：before-enter、enter、after-enter、enter-cancelled
离场动画钩子函数：before-leave、leave、after-leave、leave-cancelled
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > </transition>
2、动画钩子函数的第一个参数el表示什么？
动画钩子函数的第一个参数el表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
methods: {
// 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
// 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
beforeEnter(el){
// beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
// 设置小球开始动画之前的，起始位置
el.style.transform = "translate(0, 0)";
},
}
3、动画钩子函数 enter(el, done){}的第二个参数done表示什么意思？
enter的第二个参数done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用，enter中执行done可以消除动画延迟
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')
// 只设置半场动画的关键，让isShow在这个半场中由false依旧变成false
this.isShow = !this.isShow;
}
}
4、动画钩子函数实例（做小球半场动画）中 afterEnter 动画钩子函数中的 this.isShow = !this.isShow; 的意义是什么 ？
|||-begin
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')
// 只设置半场动画的关键，让isShow在这个半场中由false依旧变成false
this.isShow = !this.isShow;
}
}
|||-end
this.isShow = !this.isShow 是只设置半场动画的关键，让isShow在这个半场中由false依旧变成false，那么下次点击的时候依旧是从隐藏开始，依旧是进入的半场，直接跳过后半场动画
二、动画钩子函数
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动画钩子函数</title> 6 <style> 7 .ball { 8 width: 15px; 9 height: 15px; 10 border-radius: 50%; 11 background-color: red; 12 } 13 </style> 14 </head> 15 <body> 16 <!-- 17 18 动画钩子函数也就是用函数（用js控制css）来操作动画，动画钩子函数中可以更加方便的操作动画，比如只实现半场动画，像物品添加到购物车的动画 19 20 21 --> 22 <div id="app"> 23 <!-- 1. 使用 transition 元素把 小球包裹起来 --> 24 <transition 25 @before-enter="beforeEnter" 26 @enter="enter" 27 @after-enter="afterEnter"> 28 <div class="ball" v-show="isShow"></div> 29 </transition> 30 <br> 31 <button @click="isShow=!isShow">添加到购物车</button> 32 </div> 33 <script src="../js/vue.js"></script> 34 <script> 35 let vm = new Vue({ 36 el: '#app', 37 data: { 38 isShow:false 39 }, 40 methods: { 41 // 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象 42 // 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象 43 beforeEnter(el){ 44 // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式 45 // 设置小球开始动画之前的，起始位置 46 el.style.transform = "translate(0, 0)"; 47 }, 48 enter(el, done){ 49 // 这句话，没有实际的作用，但是，如果不写，出不来动画效果； 50 // 可以认为 el.offsetWidth 会强制动画刷新 51 el.offsetWidth; 52 // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态 53 el.style.transform = "translate(150px, 450px)"; 54 el.style.transition = 'all 1s ease'; 55 56 // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用 57 done(); 58 }, 59 afterEnter(el){ 60 // 动画完成之后，会调用 afterEnter 61 // console.log('ok') 62 // 只设置半场动画的关键，让isShow在这个半场中由false依旧变成false 63 //那么下次点击的时候依旧是从隐藏开始，依旧是进入的半场 64 this.isShow = !this.isShow; 65 } 66 } 67 }); 68 </script> 69 </body> 70 </html>