Vue.js Add to Cart ball animation

• Generate a div of an animated ball, and generate five balls, five to generate a certain number of balls to use as the operation, according to the speed of the ball animation, generally speaking five can also guarantee that there is enough ball number to run the animation

• The contents of the animation are the outer and inner layers, the outer layer controls the orbit and direction of the animated ball, and the inner layers control the running state of the animation ball.

• Animation using Vue's JS hook implementation

• Because the small ball animation has only one Direction (only performs One direction from top to bottom tumble), so only uses the Before-enter,enter,after-enter

• Control the visibility of the ball with V-show, visible during animation execution, and hidden for the rest of the time

• <div class= "Ball-container" >
      <transition name= "Fade" v-for= "ball in balls"
                  : key= "Ball.show"
                  @before-enter= "Beforeenter"
                  @enter = "Enter"
                  @after-enter= "Afterenter" >
          <div class= "Ball" v-show= "Ball.show" >
              <div class= "Inner Inner-hook" ></div>
          </div>
      </transition>
  </div>

• • Set the balls array to represent five small balls

  • Set the Dropballs array to run the ball

Data () {
  return {
      Bar: ",
      Balls: [
          {
              Show:false
          },
          {
              Show:false
          },
          {
              Show:false
          },
          {
              Show:false
          }
      ],
      Dropballs: []
  }
}

• • • As long as the drop event is triggered, not only the code in the drop event is executed, but also several Vue JS listener hooks are executed sequentially.

      • Triggered the Drop event

      • Beforeenter Start execution

      • Enter to start execution

      • Afterenter Start execution

    • The triggering of the drop event can be triggered by clicking the Add Ball button of the Cartcontrol component Addcart Event trigger $emit , or it can be this.$refs.shopcart.drop(target); triggered directly by the parent component

      • The purpose of this is to implement, after the sub-component Cartcontrol Click, you can pass the DOM to the parent component goods and then to the subcomponent Shopcart, (because this is the channel between them now, Shopcart subcomponents do not import Cartcontrol subcomponents, so there is no direct communication, so that the communication between multiple components can be achieved, so that the need to achieve, for example, this is to achieve the click of sub-component Cartcontrol after adding an animation, Slide the ball into another component Shopcart

    • $emit is the event that fires on the current instance. Additional parameters are passed to the listener callback.

Methods: {
Drop (EL) {
Console.log (' Sub-component detected ', EL)
for (Let i = 0; i < this.balls.length; i++) {
Let ball = this.balls[i]
if (!ball.show) {//Put the ball of false into Dropballs
Ball.show = True
Ball.el = EL//Set the El property of the ball to a DOM object
This.dropBalls.push (Ball)
Return
}
}
},
Beforeenter (EL) {//This method is executed because it is a Vue listener event
Console.log (' Ball into the past ', EL)
Let count = This.balls.length
while (count--) {
Let ball = This.balls[count]
if (ball.show) {
Let rect = Ball.el.getBoundingClientRect ()//Gets the displacement of the ball relative to the viewport (ball height)
Let x = rect.left-32
Let y =-(window.innerheight-rect.top-22)//negative number, because it is from the upper left corner of the direction of the downward
Console.log (x, y)
El.style.display = "//Clear Display
El.style.webkitTransform = ' Translate3d (0,${y}px,0) '
El.style.transform = ' Translate3d (0,${y}px,0) '
Working with inner animations
Let inner = el.getelementsbyclassname (' inner-hook ') [0]//Use the Inner-hook class to simply be JS operation
Inner.style.webkitTransform = ' Translate3d (${x}px,0,0) '
Inner.style.transform = ' Translate3d (${x}px,0,0) '
}
}
},
Enter (el, done) {//The execution of this method is because this is a Vue listener event
Console.log (' Ball into the middle ', EL)
/* eslint-disable No-unused-vars */
Let RF = el.offsetheight//trigger Redraw HTML
this. $nextTick (() = {//Let animation effect execute asynchronously for improved performance
El.style.webkitTransform = ' Translate3d (0,0,0) '
El.style.transform = ' Translate3d (0,0,0) '
Working with inner animations
Let inner = el.getelementsbyclassname (' inner-hook ') [0]//Use the Inner-hook class to simply be JS operation
Inner.style.webkitTransform = ' Translate3d (0,0,0) '
Inner.style.transform = ' Translate3d (0,0,0) '
El.addeventlistener (' transitionend ', done)//Vue in order to know the completion of the transition, the corresponding event listener must be set.
})
},
Afterenter (EL) {//This method is executed because it is a Vue listener event
Console.log (' ball into completion ', EL)
Let ball = this.dropBalls.shift ()//finish an animation and delete a dropballs
if (ball) {
Ball.show = False
El.style.display = ' None '//Hide Ball
}
}
}

• About transitionend

• About the drop method is to implement the show property and El Property processing for each ball, and clicking once will automatically place a small sphere inside the dropballs array, Putting it inside means that a small ball has been animated, but since the animation is asynchronous, it is set up first.

• About getboundingclientrect (displacement is calculated from the upper left corner)

  • Use Getboundingclientrect to get the coordinates of the current element. Then you need to offset the left minus the width of the element to get the true final displacement x-coordinate

  • Use Getboundingclientrect to get the coordinates of the current element. Then you need the height of the current screen minus the top of the element minus the height of the element itself to get to the true final displacement y-coordinate, and this is a negative number, because it's from the upper-left corner

• About HTML redraw

  • p> because the browser is required for repainting and there is a queue complete, this is primarily for performance, although the animation hides the small ball display none , but does not trigger the HTML redraw, or does not immediately trigger the HTML redraw, so you need to manually

  • Let RF = El.offsetheight;   This is a manual way to trigger HTML redraw

  • Web page performance management   http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

  • High-performance JavaScript reflow and redraw http://www.cnblogs.com/zichi/p/4720000.html

. Ball-container
    . Ball
       Position fixed
       left:32px
       bottom:22px
       z-index:200
       Transition:all. 6s Cubic-bezier (0.49,-0.29, 0.75, 0.41)
       . Inner
           Width 16px
           Height 16px
           Border-radius 50%
           Background rgb (0,160,220)
           Transition:all. 6s Linear

About cubic-bezier(0.49, -0.29, 0.75, 0.41) , is the configuration of the animation parabolic curve (Bezier curve), based on the CSS3 implementation, http://cubic-bezier.com/#.17,.67,.83,.67, reference Bezier and CSS3 animation, SVG and canvas base , the parabola is placed on the outer layer to control the orbit and direction of the inner elements.

Original address: http://www.cnblogs.com/yuxingyoucan/p/7063881.html

Vue.js Add to Cart ball animation