Vue - 过渡与动画 transition

本文主要目的记录自己在项目中所接触到的，方便日后记忆😁

transition钩子函数：

<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>
methods: {
  // 过渡进入
  // 设置过渡进入之前的组件状态
  beforeEnter: function (el) {
    // ...
  },
  // 设置过渡进入完成时的组件状态
  enter: function (el, done) {
    // ...
    done()
  },
  // 设置过渡进入完成之后的组件状态
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
  // 过渡离开
  // 设置过渡离开之前的组件状态
  beforeLeave: function (el) {
    // ...
  },
  // 设置过渡离开完成时地组件状态
  leave: function (el, done) {
    // ...
    done()
  },
  // 设置过渡离开完成之后的组件状态
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

接下来就记录下本次项目所写的东西啦，效果就是飞入购物车的效果。。。

直接上代码

//通过vuex获取state.ball数据
computed: {
   ball () {
     return this.$store.state.ball
   }
 }
<transition name="ball" //自定义过渡类名通过 name=‘’
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @css="true"
 >
<div class="addcart-mask" v-show="ball.show">
    <img class="mask-item"/>
</div>
</transition>
//利用钩子函数写了一些相关的飞入购物车的代码
beforeEnter (el) {
 // 通过浏览器方法获取所有按钮的位置
 let rect = this.ball.el.getBoundingClientRect()
 // 获取购物车的位置
 let rectEL = document.getElementsByClassName('ball-rect')[0].getBoundingClientRect()
 // 拿到当前小球
 let ball = document.getElementsByClassName('mask-item')[0]
 // 计算按钮和购物车之间的差值
 let x = (rectEL.left + 16) - (rect.left + rect.width / 2)
 // 距离顶部的差值
 let y = rect.top + rect.height / 2 - rectEL.top + 5 - 16
 el.style.transform = 'translate3d(0,' + y + 'px,0)'
 ball.style.transform = 'translate3d(-' + x + 'px,0,0)'
 ball.src = this.ball.img
},
enter (el) {
  let a = el.offsetHeight
  el.a = a
  el.style.transform = 'translate3d(0,0,0)'
  document.getElementsByClassName('mask-item')[0].style.transform = 'translate3d(0,0,0)'
},
afterEnter () {
  this.ball.show = false
 }
//通过贝塞尔曲线实现飞入时是曲线的效果
.ball-enter-active{
  transition: 1s cubic-bezier(.22,.85,.59,1.08)
}
.ball-enter-active .mask-item{
  transition: 1s cubic-bezier(0,0,0,0)
}

贝塞尔曲线

最终效果