uniapp/微信小程序实现加入购物车点击添加飞到购物车动画

Homilier

已于 2024-05-06 14:21:26 修改

阅读量2.4k

点赞数 11

CC 4.0 BY-SA版权

文章标签：前端 vue.js 微信小程序动画 uniapp

于 2024-05-06 14:19:58 首次发布

本文链接：https://blog.csdn.net/Honiler/article/details/138493014

1、预期效果

2、实现思路

每次点击添加按钮时，往该按钮上方添加一个悬浮元素，通过位移动画将元素移到目标位置。

1. 为每个点击元素设置不同的class，才能通过uni.createSelectorQuery来获取每个元素的节点信息；

2. 添加一个与点击元素一模一样的动画元素；

3. 获取点击元素的节点信息将动画元素放置到点击元素上方；

4. 计算动画元素到目标位置的距离，获得xy坐标执行位移动画；

5. 等待每个动画元素执行动画完毕后移除该元素。

3、核心代码

<template>
  <view>
    <!-- 商品列表 -->
    <view v-for="item in goodsList" :key="item.id">
      <view :class="[`add-cart-${item.id}`]" @click="addToCart(item)">加购</view>
    </view>
    <!-- 动画元素列表 -->
    <view
      v-for="item in anims" :key="item.key"
      style="position: fixed; transition: transform 0.5s linear;"
      :style="{
        top: `${item.top}px`,
        left: `${item.left}px`,
        transform: `translate(${item.x}px, ${item.y}px)`,