效果
1.点击加号按钮动画效果
2.下方购物车标识动画效果
首先导入小程序原生组件库colorui
wxml
//加号按钮
<image catchtap="addToShopCart" aria-disabled="false" class="animation-{{item.id==clickId?'fade':''}} basis-sm shadow" data-id="{{item.id}}" src="/static/icons-xiangle/page-serviceShop/addCart.png" style="width:36rpx;height:50rpx;">
</image>
//购物车标识
<view class="cuIcon-cu-image" style="z-index:10;position:fixed;bottom:40rpx;right:0;width:126rpx;height:auto;">
<image src="/static/icons-xiangle/homepage/bubble-cart.png" style="width:126rpx;height:102rpx;" bindtap="toGoodShopCart"></image>
<view class="cu-tag badge animation-{{animation}} basis-sm shadow" style="right:10rpx;background-color:#949FE3;" aria-disabled="false">{{selectedShopAmount}}</view>
</view>
wxss
@import "/colorui/animation.wxss";
js
addToShopCart(e){
console.log(e);
var clickId=e.currentTarget.dataset.id
var animation='scale-down'
var that = this;
that.setData({
animation: animation,
clickId:clickId
})
setTimeout(function() {
that.setData({
animation: '',
clickId:''
})
}, 1000)
},