朴朴超市加入购物车动画-贝塞尔曲线

<template>
  <div class="container">
    <div v-for="(item, index) in dataList" :key="index" class="item-container">
      <div class="animationIcon">
        <div
          v-for="animation in animations"
          :key="animation.id"
          :class="{'baltRight': index % 2 === 0, 'balt': index % 2 !== 0}"
          v-if="animation.active && animationIndex === index"
        >
          <div :class="{'innerRight': index % 2 === 0, 'inner': index % 2 !== 0}"></div>
        </div>
      </div>

      <div class="button-container">
        <button
          class="roundBtn"
          :class="buttonClass(item)"
          @animationend="resetAnimation"
          @click="decrease(index)"
        >
          <span :class="{ rotate: item.num === 0 }">-</span>
        </button>
        <span v-if="item.num > 0">{{ item.num }}</span>
        <button class="roundBtn" @click="increase(index)">
          <span :class="{ rotate: item.num > 0 }">+</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [{ num: 1 }, { num: 12 }, { num: 13 }],
      animationIndex: null,
      animations: []
    };
  },
  methods: {
    buttonClass(item) {
      if (item.num === 0) {
        return "hidden";
      } else {
        return "visible-in";
      }
    },
    increase(index) {
      this.dataList[index].num++;
      this.animationIndex = index;
      const animation = {
        id: Date.now(),
        active: true
      };
      this.animations.push(animation);

      setTimeout(() => {
        animation.active = false;
        setTimeout(() => {
          this.animations = this.animations.filter(anim => anim.id !== animation.id);
        }, 1000);
      }, 1000);
    },
    decrease(index) {
      if (this.dataList[index].num > 0) {
        this.dataList[index].num--;
      }
    },
    resetAnimation() {
      // 处理动画结束后的逻辑
    }
  }
};
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.item-container {
  margin-bottom: 10px;
}

.button-container {
  position: relative;
  height: 50px;
  width: 50px;
}

.roundBtn {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 24px;
  transition: transform 0.5s;
  position: absolute;
  top: -7px;
  left: 31px;
  line-height: 51px;
}

.roundBtn span {
  display: inline-block;
  transition: transform 0.5s;
}

.rotate {
  transform: rotate(90deg);
}

.hidden {
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
}

.visible-out,
.visible-in {
  transform: translateX(-100px);
  transition: transform 0.5s;
}

.animationIcon {
  position: relative;
  top: 0;
  left: 0;
  background: red;
}

.balt,
.baltRight {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  z-index: 99999;
}

.inner,
.innerRight {
  background: red;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 99999;
}

.balt {
  animation: moveX 1s 1;
}

.inner {
  animation: moveY 1s cubic-bezier(1, -1, 1, 10) 1;
}

.baltRight {
  animation: moveXR 1s 1;
}

.innerRight {
  animation: moveYR 1s cubic-bezier(1, -1, 1, 10) 1;
}

@keyframes moveX {
  50% {
    transform: translateX(-100px);
  }

  100% {
    transform: translateX(-100px);
  }
}

@keyframes moveY {
  50% {
    transform: translateY(1000px);
  }

  100% {
    transform: translateY(1000px);
  }
}

@keyframes moveXR {
  50% {
    transform: translateX(180px);
  }

  100% {
    transform: translateX(180px);
  }
}

@keyframes moveYR {
  50% {
    transform: translateY(1000px);
  }

  100% {
    transform: translateY(1000px);
  }
}
</style>