Bug will appear when the vue shopping cart animation is triggered repeatedly.

using vue to animate the shopping cart, I made a simplified version of demo : https://codepen.io/jacktown/pen/JwWPrx

to describe the problem. balls in

data is the corresponding data of div that is used to realize animation. Use v-show to switch between showing and hiding, and use the hook of js to set transform to realize animation.

what I want to achieve is to add an animation task to tasks each time the button is clicked, and execute the new animation as soon as there are free squares. But now, if you click to add more animation tasks before the previous animation is finished, the subsequent animation will not be executed correctly (the circle that should have performed the animation just stays in place. Instead of re-entering from the right).

Front-end javascript transition animation vue.js

Mar.03,2022

solved, put the execution of the new animation ( this.doTask (); ) in the afterLeave hook function, then the previous animation should be really finished:

    afterEnter (ball) {
      ball.isShow = false;
      this.usedBalls.shift();
    },
    afterLeave (ball) {
      this.doTask();
    }

Previous: Node+mongo render page

Next: Xiaobai asks for advice: get the data under _ _ ob__: Observer