Detailed explanation of the parabola effect of a small ball in the shopping cart using vue

This time I will bring you a detailed explanation of the small ball parabola effect of Vue in realizing the shopping cart. What are the precautions for Vue to realize the small ball parabola in the shopping cart. The following is a practical case, let's take a look.

This article introduces the sample code of the vue 2.0 shopping cart ball parabola and shares it with everyone. The details are as follows:

Note: This project is modeled after Are You Hungry? I'm using the latest Vue, and some of the writing methods on the video have been abandoned.

Layout code

<p class="ball-container">
 <transition name="drop"
       v-for="ball in balls"
       @before-enter="beforeDrop"
       @enter="dropping"
       @after-enter="afterDrop">
  <p v-show="ball.show" class="ball" v-bind:css="false">
   <p class="inner inner-hook" ></p>
  </p>
 </transition>
</p>

css code (using stylus writing method)

.ball-container
 .ball
  position fixed
  left 32px
  bottom 22px
  z-index 200
  transition all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41)
  .inner
   width 16px
   height 16px
   border-radius 50%
   background-color rgb(0,160,220)
   transition all 0.4s linear

js code

data() {
  return {
   balls : [
    {
     show: false
    },
    {
     show: false
    },
    {
     show: false
    },
    {
     show: false
    },
    {
     show: false
    }
   ],
   dropBalls: []
  };
},   
methods: {
  drop(el) {
   for(let i = 0; i < this.balls.length; i++) {
    let ball = this.balls[i];
    if(!ball.show) {
     ball.show = true;
     ball.el = el;
     this.dropBalls.push(ball);
     return ;
    }
   }
  }
  beforeDrop(el) {
   let count = this.balls.length;
   while (count--) {
    let ball = this.balls[count];
    if(ball.show) {
     let rect = ball.el.getBoundingClientRect();
     let x = rect.left - 32;
     let y = -(window.innerHeight - rect.top - 22);
     el.style.webkitTransform = `translate3d(0,${y}px,0)`;
     el.style.transform = `translate3d(0,${y}px,0)`;
     let inner = el.getElementsByClassName(&#39;inner-hook&#39;)[0];
     inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
     inner.style.transform = `translate3d(${x}px,0,0)`;
    }
   }
  }，
  dropping(el) {
   /* eslint-disable no-unused-vars */
   let rf = el.offsetHeight;
   this.$nextTick(() => {
    el.style.webkitTransform = 'translate3d(0,0,0)';
    el.style.transform = 'translate3d(0,0,0)';
    let inner = el.getElementsByClassName('inner-hook')[0];
    inner.style.webkitTransform = 'translate3d(0,0,0)';
    inner.style.transform = 'translate3d(0,0,0)';
   });
  },
  afterDrop(el){
   let ball = this.dropBalls.shift();
   if(ball) {
    ball.show = false;
    el.style.display = 'none';
   }
  }
}

getBoundingClientRect(). For the method, please read this article http://www.jb51.net/article/134208.htm

illustrate:

Goods is a component that contains menu(p), foods(p), and shopcart (shopping cart component). Among them, foods include cartcontrol (i.e., small ball component)

Communication between components: Description: Menus and items

Question 1: The small ball needs to obtain the quantity of the clicked product.

Use Vue's props to pass the foods value to cartcontrol. But there's a problem with this. That is, the child component is updated and cannot be synchronized back to the parent component. Moreover, in the child component, a count attribute is registered for food, and this attribute cannot be synchronized back to the parent component (goods).

Solution:

Import global Vue.

Use Vue.set(target,key,value); to register count on target;

Question 2: Click the ball and pass the number of clicked products to shopcart.

Define a method in computed:{} of goods, and pass the method to shopcart in the form of props.

Because shopcart only operates on the data passed in the past (it will not change). Therefore, there is no need to synchronize the parent component.

Question 3: The shopping cart ball makes a parabolic motion.

The shopping cart ball makes a parabolic motion. First of all, the landing points are in the shopping cart, and the balls are random. To do parabolic motion, you need to obtain the clicked The x,y position of the number. Secondly, parabolic motion only occurs during enter--> enter-to, and during leave--> leave-to There is no period, so you need to use the hook function provided by Vue.

Get the number x, y position:

The small ball (cartcontrol) is a subcomponent. Data needs to be passed to goods (parent component). You can use Vuex, or use the event bus directly. Demo for Are You Hungry? Use the event bus directly.

Create an empty Vue. In cartcontrol, register a listener through Bus.$emit(key, ... arg);, and then use the parent component to listen to this method through Bus.$on(key, function(... arg));. Just pass the dom object you are operating on

Hooks provided by Vue

One thing to note here is that Vue is on its official website. For only excessive js, done is necessary. When I add done, the after-enter method cannot be executed.
There is another question. The Vue official website recommends that there is only a transition effect. Add v-bind:class='false' to the element that performs transition animation. I didn't add it before, but it appeared. The ball can only do transition effects at the first click.                                                            

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of components in Vue.js

How to use transaction automatic recycling in mysql connection pool (attached Code)

The above is the detailed content of Detailed explanation of the parabola effect of a small ball in the shopping cart using vue. For more information, please follow other related articles on the PHP Chinese website!