微信小程序点击加入购物车小球跳入动画

最新推荐文章于 2024-08-07 16:12:37 发布

__仰望

最新推荐文章于 2024-08-07 16:12:37 发布

阅读量7.1k

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_42164539/article/details/87889002

版权

微信小程序专栏收录该内容

24 篇文章 0 订阅

订阅专栏

直接上js文件

 /*加入购物车动效*/
    _flyToCartEffect:function(events){
        //获得当前点击的位置，距离可视区域左上角
        var touches=events.touches[0];
        var diff={
                x:'25px',
                y:25-touches.clientY+'px'
            },
            style='display: block;-webkit-transform:translate('+diff.x+','+diff.y+') rotate(350deg) scale(0)';  //移动距离
        this.setData({
            isFly:true,
            translateStyle:style
        });
        var that=this;
        setTimeout(()=>{
            that.setData({
                isFly:false,
                translateStyle:'-webkit-transform: none;',  //恢复到最初状态
                isShake:true,
            });
            setTimeout(()=>{
                var counts=that.data.cartTotalCounts+that.data.productCounts;
                that.setData({
                    isShake:false,
                    cartTotalCounts:counts
                });
            },200);
        },1000);
    },

根据自己需求修改即可。