1. 动画的原理

动画.png

  1. enter表示从隐藏到显示
  2. Tip:重点关注v-enter
  3. leave表示从显示到隐藏
  4. Tip:重点关注v-leave-to
  5. v-enter-active,v-leave-active监听动画的执行过程
  7. <transition>
  8.     <p v-if="isShow">hello world</p>
  9. </transition>
  10. <button @click="handleClick">toggle</button>
  12. <script>
  13. export default {
  14.   name: "home",
  15.   data() {
  16.     return {
  17.       isShow: true
  18.     };
  19.   },
  20.   methods: {
  21.     handleClick() {
  22.       this.isShow = !this.isShow;
  23.     }
  24.   }
  25. };
  26. </script>
  28. .v-leave-active,.v-enter-active{
  29.   transition: opacity 4s;
  30. }
  31. .v-leave-to,.v-enter{
  32.   opacity: 0;
  33. }

2. 动画封装成插槽

  1. //1.封装
  2. <template>
  3.   <transition>
  4.      <slot name="fade"></slot>
  5.   </transition>
  6. </template>
  8. <script>
  9. export default {
  10.     name:"Fade"
  11. };
  12. </script>
  14. <style scoped>
  15. .v-leave-active,.v-enter-active{
  16.   transition: opacity 4s;
  17. }
  18. .v-leave-to,.v-enter{
  19.   opacity: 0;
  20. }
  21. </style>
  23. //2.使用
  24. <fade>
  25.       <h1 slot="fade" v-show="isShow">This is an about page</h1>
  26. </fade>

3. 动画的钩子函数

Vue2实现动画的方式可以是css也可以js钩子，大部分情况下css3即可满足，但若是需要在实现动画过程中进行位置计算，那就需要使用js钩子函数来进行

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="./lib/vue-2.4.0.js"></script>
  10.     <style>
  11.         .ball {
  12.             width: 15px;
  13.             height: 15px;
  14.             border-radius: 50%;
  15.             background-color: red;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21. <div id="app">
  22.     <input type="button" value="快到碗里来" @click="flag=!flag">
  23.     <!-- 1. 使用 transition 元素把 小球包裹起来 -->
  24.     <transition
  25.             @before-enter="beforeEnter"
  26.             @enter="enter"
  27.             @after-enter="afterEnter"
  28.             @before-leave="beforeLeave"
  29.             @leave="leave"
  30.             @after-leave="afterLeave">
  31.         <div class="ball" v-show="flag"></div>
  32.     </transition>
  33. </div>
  35. <script>
  37.     // 创建 Vue 实例，得到 ViewModel
  38.     var vm = new Vue({
  39.         el: '#app',
  40.         data: {
  41.             flag: false
  42.         },
  43.         methods: {
  44.             //el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
  45.             beforeEnter(el){
  46.                 // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
  47.                 el.style.transform = "translate(0px, 0px)"
  48.                 el.style.opacity = 0.0
  49.             },
  50.             //当只有javascript过渡的时候，在enter和leave中必须使用done进行回调。done的作用其实是调用afterEnter和afterLeave方法
  51.             enter(el,done){
  52.                 //el.offsetWidth 会强制动画刷新
  53.                 el.offsetWidth
  54.                 // enter 表示动画 开始之后的样式，在这里可以设置小球完成动画之后的结束状态
  55.                 el.style.transform = "translate(150px, 450px)"
  56.                 el.style.transition = 'all 1s ease'
  57.                 el.style.opacity = 1.0
  58.                 //过渡动画结束后调用afterEnter方法
  59.                 el.addEventListener('transitionend', done);
  60.             },
  61.             afterEnter(el){
  62.                 // 动画完成之后，会调用 afterEnter
  63.                 console.log('ok111')
  64.             },
  67.             beforeLeave(el){
  68.                 //el.style.opacity = 1.0
  69.                 el.style.transform = "translate(150px, 450px)"
  70.                 console.log("beforeLeave")
  71.             },
  72.             leave(el,done){
  73.                 console.log("leave")
  74.                 el.offsetWidth
  75.                 // leave 表示动画 离开 之后的样式，在这里可以设置小球完成动画之后的结束状态
  76.                 el.style.transition = 'all 1s ease'
  78.                 el.style.opacity = 0
  79.                 el.style.transform = "translate(0px,0px)"
  80.                 el.addEventListener('transitionend', done);
  81.             },
  82.             afterLeave(el){
  83.                 // 动画完成之后，会调用 afterEnter
  84.                 console.log('ok222')
  85.             }
  86.         }
  87.     });
  88. </script>
  89. </body>
  91. </html>