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

cooldrw2012

于 2022-12-10 11:35:57 发布

阅读量616

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue3+TS 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/cooldrw2012/article/details/128263105

开发思路

当用户点击购物车添加按钮，通过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>