加入购物车动画效果

css代码块

.footer{
    bottom: 0;
    position: fixed;
}

ul li{
    list-style: none;
    display: flex;
}
img{
    width: 100px;
}
ul li button{
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
}
ul li span{
    margin-right: 10px;
}
#ball{
    width: 15px;
    height: 15px;
    background: aqua;
    border-radius: 50%;
    position: fixed;
    transition: left 1s linear , top 1s ease-in;
    z-index: 1;
}

js代码块

export default function App7() {
    const [list, setList] = useState(lis)
    // 点击按钮 抛掷小球
    const addNum = (e, id) => {
        let idx = list.findIndex(item => item.id === id)
        list[idx].num += 1
        setList([...list])
        var ball = document.getElementById('ball');  //获取小球的dom节点
        // 将小球进行归位，移到点击的位置，
        ball.style.top = e.pageY + 'px';
        ball.style.left = e.pageX + 'px';
        ball.style.transition = 'left 0s, top 0s';  //动画
        // 小球向下进行抛掷， 设置定时器可以重复点击
        setTimeout(() => {
            ball.style.top = window.innerHeight + 'px';
            ball.style.bottom = "20px"
            ball.style.left = '10px';
            //css动画   加上cubic-bezier(.35,.8,1,1) 立方贝塞尔曲线  底部有官网链接
            ball.style.transition = 'left 1s cubic-bezier(.35,.8,1,1), top 1s ease-in';
        }, 20)
    }

    const descNum = (e,id) => {
        let idx = list.findIndex(item => item.id === id)
        if (list[idx].num < 1) {
            return false
        } else {
            list[idx].num -= 1
        }
        setList([...list])
        var ball = document.getElementById('ball');  //获取小球的dom节点
        // 将小球进行归位，移到点击的位置，
        ball.style.top = e.pageY + 'px';
        ball.style.left = e.pageX + 'px';
        ball.style.transition = 'left 0s, top 0s';  //动画
        // 小球向下进行抛掷， 设置定时器可以重复点击
        setTimeout(() => {
            ball.style.top = window.innerHeight + 'px';
            ball.style.bottom = "20px"
            ball.style.left = '10px';
            //css动画   加上cubic-bezier(.35,.8,1,1) 立方贝塞尔曲线  底部有官网链接
            ball.style.transition = 'left 1s cubic-bezier(.35,.8,1,1), top 1s ease-in';
        }, 20)
    }
    let nums = 0
    let zj = () => {
        lis.forEach(item => {
            nums += item.num
        })
        return nums
    }
    return (
        <div>
            <ul>
                {
                    list.map(item => {
                        return (
                            <li key={item.id}>
                                <img src={item.img} alt="" />
                                <p>{item.name}</p>
                                <button onClick={(e) => { descNum(e,item.id) }}>-</button>
                                <span>{item.num}</span>
                                <button onClick={(e) => { addNum(e, item.id) }}>+</button>
                            </li>
                        )
                    })
                }
            </ul>
            <div id="ball"></div>
            <div className="footer">
                <ActionBar>
                    <ActionBar.Icon icon={<CartO />} badge={{ content: zj() }} text='购物车' />
                </ActionBar>
            </div>
        </div>
    )
}

 实现数量加减购物车也会发生相对应的变化

   let nums = 0

    let zj = () => {

        lis.forEach(item => {

            nums += item.num

        })

        return nums

    }

 <div className="footer">

                <ActionBar>

                    <ActionBar.Icon icon={<CartO />} badge={{ content: zj() }} text='购物车' />

                </ActionBar>

            </div>