Today made a fun function, added to the shopping cart special effects, without saying too much, first on the effect

There are several key points to achieve this effect:

  • The shopping cart car is in a fixed location that I am usingposition:fixedSecure the shopping cart to the right
  • The trajectory of the ball dynamics needs to use bezier curve, which can be adjusted on this website. Note that bezier curve is the speed of the ball movement, not the trajectory (read the article for a long time to understand).
  • The position of the ball is the same as the position of the shopping cart. When you flip the ball, you calculate the transform and vertical displacement of the point where the shopping cart is added to the cart. Then you pull the ball to the current position and show it using the Transition animation and Bezier curve.

The core code is as follows

<! - ball - >
<div>
   <transition
     name="drop"
     @before-enter="beforeDrop"
     @enter="dropping"
     @after-enter="afterDrop"
   >
     <div
       v-show="ball.show"
       class="ball"
     >
       <div class="inner inner-hook" />
     </div>
   </transition>
</div>

<! -- Location of shopping cart -->
<div class="rangeIcon">
    {{ count }}    
 </div>

<script>
 export default {
   data(){
     return{
       ball: {
        show: false.el: null 
       },
       count: 0}},methods:{
     drop (el) { / / parabolic
      if (!this.ball.show) {
        this.ball.show = true
        this.ball.el = el
      }
    },
    beforeDrop (el) { /* Shopping cart ball animation */
      const ball = this.ball
      if (ball.show) {
        const rect = ball.el.getBoundingClientRect() // The position of the element relative to the viewport
        const x = -(window.innerWidth - rect.left - 10) / / get x
        const y = -(window.innerHeight - rect.top - 430) / / y
        el.style.display = ' '
        el.style.webkitTransform = 'translateY(' + y + 'px)' // translateY
        el.style.transform = 'translateY(' + y + 'px)'
        const inner = el.getElementsByClassName('inner-hook') [0]
        inner.style.webkitTransform = 'translateX(' + x + 'px)'
        inner.style.transform = 'translateX(' + x + 'px)'
      }
    },
    dropping (el, done) { /* Style reset */
      const rf = el.offsetHeight
      el.style.webkitTransform = 'translate3d(0,0,0)'
      el.style.transform = 'translate3d(0,0,0)'
      const inner = el.getElementsByClassName('inner-hook') [0]
      inner.style.webkitTransform = 'translate3d(0,0,0)'
      inner.style.transform = 'translate3d(0,0,0)'
      el.addEventListener('transitionend', done)
    },
    afterDrop (el) { /* Initialize the ball */
      this.ball.show = false
      el.style.display = 'none'}}},</script>  

<style scoped lang="scss">
  .ball {
  position: fixed;
  right: 10px;
  bottom: 430px;
  z-index: 200;
  transition: all 1s cubic-bezier(.4, -0.89.55.54);
  /* Bezier curve */
}

.inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #FE6E6B;
  transition: all 1s linear;
}
  
.rangeIcon {
  position: fixed;
  right: 10px;
  bottom: 430px;
  font-size: 30px;
  color: #DA3937;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background: #EFEFEF;
  box-shadow: 0 3px 7px 0 rgba(107.107.107.0.35);
  border-radius: 2px;
  text-align: center;
  padding-top: 3px;
}  
</style>
Copy the code

For business reasons, my add button is in the subcomponent of the current component of the shopping cart, and the subcomponent, so I put an emitter on it to communicate with the shopping cart component. When called, the child passes the event target to the drop method, and the ball is ready to move.

Reference: www.cnblogs.com/pengfei25/p…