vue 小球动画,这玩意非常考验css

网上非常多的案列,在这里我就抄过来,能用基本就达到目的了

CartAnim.vue ,直接就是这个组件,我都复制好了

<template>
  <div class="ball-container">
    <transition-group
      name="drop"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
    >
      <div class="ball" v-for="(ball,index) in balls" v-show="ball.show" :key="index">
        <div class="inner inner-hook"></div>
      </div>
    </transition-group>
  </div>
</template>
<script>
export default {
  name: "cartAnim",
  data() {
    return {
      // 使用balls存放5个小球,这些小球的默认状态都是不显示
      // 为什么是5个 不是3个 4个
      // 这里的意思是在一瞬间可以点多少次'+'号,5个差不多就够了,3个太少了,作为多年的程序员来说瞬间点3下轻而易举
      balls: [
        { show: false },
        { 
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值