商品飞入购物车动画

vue3 直接用

<template>

  <div class="plantingTrees">

    <ul class="shop">

      <li v-for="item in items">

        <span>{{ item.text }}</span>

        <span>{{ item.price }}</span>

        <span><img :src="item.img" style="width: 50px; height: 50px" /></span>

        <button @click="addCar($event, item.img)">添加</button>

      </li>

    </ul>

    <div class="cart" ref="shopCar" id="son">

      <div class="num">{{ count }}</div>

      <img

        src="https://img2.baidu.com/it/u=692835735,3511467736&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=500"

      />

    </div>

    <!-- 小球图片 -->

  </div>

</template>

<script setup>

import { ref, reactive } from "vue";

let shopCar = ref();

let showCart = ref(false);

let count = ref(0);

let items = ref([

  {

    text: "苹果",

    price: 15,

    img: "https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677258000&t=c9cc2d40f9b9efeb866665d97f5cb951",

  },

  {

    text: "香蕉",

    price: 15,

    img: "https://img1.baidu.com/it/u=407852637,3650486136&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677258000&t=c6da04e21f034c6f5bcf26682821cd2a",

  },

]);

const addCar = (event, items) => {

  count.value++;

  showCart.value = false;

  let x = event.pageX - event.target.offsetWidth / 2;

  let y = event.pageY - event.target.offsetWidth / 2;

  createBall(x, y, items);

  addAnimate();

};

/* 创建小球，添加动画 */

const createBall = (left, top, imgs) => {

  let bar = document.createElement("img");

  bar.style.position = "absolute";

  bar.src = imgs;

  bar.style.left = left + "px";

  bar.style.top = top + "px";

  bar.style.width = "50px";

  bar.style.height = "50px";

  bar.style.borderRadius = "50%";

  // bar.style.backgroundColor = "#02b6fd";

  bar.style.transition =

    "left .6s ease-in-out, top .6s cubic-bezier(0.5, -0.5, 1, 1)";

  document.body.appendChild(bar);

  // 添加动画属性

  setTimeout(() => {

    let target = shopCar.value;

    bar.style.left = target.offsetLeft + target.offsetWidth / 2 + "px";

    bar.style.top = target.offsetTop + "px";

    showCart.value = true;

    console.log(bar.style.left, bar.style.top);

  }, 0);

  /**

   * 动画结束后，删除自己

   */

  bar.ontransitionend = function () {

    this.remove();

    showCart.value = false;

  };

};

//购物车动画

const addAnimate = () => {

  shopCar.value.animate(

    [

      {

        transform: "scale(1.1)",

      },

    ],

    {

      duration: 1000,

      easing: "linear",

      iterations: 1,

      fill: "forwards",

      delay: 0,

      direction: "alternate",

    }

  );

};

</script>

<style lang="scss" scoped>

@import "./index.scss";

</style>

 

index.scss >>>

.shop {

  position: fixed;

  top: 300px;

  left: 500px;

}

.cart {

  position: fixed;

  bottom: 72px;

  left: 32px;

}

.cart .num {

  width: 30px;

  height: 30px;

  background-color: rgb(0, 160, 220);

  color: rgb(255, 255, 255);

  border-radius: 50%;

  text-align: center;

  line-height: 30px;

}

.cart > img {

  width: 50px;

  height: 50px;

}

.animationShake {

  animation: bottomNav-shake 0.5s ease-in-out;

}

@keyframes bottomNav-shake {

  0% {

    transform: scale(1);

  }

  25% {

    transform: scale(0.8);

  }

  50% {

    transform: scale(1.1);

  }

  75% {

    transform: scale(0.9);

  }

  to {

    transform: scale(1);

  }

}