vue3.2+ts实现小球飞入购物车

最新推荐文章于 2023-08-10 14:17:40 发布

原创

最新推荐文章于 2023-08-10 14:17:40 发布 · 638 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

开发思路

当用户点击购物车添加按钮，通过Pina状态管理，将小球状态设为显示，并传入购物车按钮对象target, 通过transition 组件的三个钩子函数控制小球动画轨迹，通过@after-enter 钩子函数，将小球隐藏

代码

一、布局

在这里插入图片描述

小球图片固定定位到购物车右下方

布局

  <!-- 购物车小球 -->
  <div class="ball-container">
    <transition 
    	@before-enter="onBeforeEnter" 
    	@enter="onEnter" 
    	@after-enter="onAfterEnter"
    >
      <!-- 外层控制小球 Y 距离  -->
      <div class="ball" v-show="ball.visible">
        <!-- 内层控制小球 X 距离  -->
        <div class="inner"></div>