微信小程序点击淡入实现类似支付宝收集能量效果

html

<view wx:for="{{ elements }}" wx:key="source" wx:for-item="item" wx:for-index="index" data-index= "{{ index }}" data-item="{{ item }}" class="icon-energy-container" bind:tap="collect">
    <image class="icon-energy {{collectIndex == index ? 'icon-energy-active' : ''}}" mode="widthFix" src="../../../../assets/img/energy.png" />
</view>

css

.icon-energy-active { 
animation-name: fadeIn; /*动画名称*/
animation-duration: 1s; /*动画持续时间*/
animation-iteration-count: 1; /*动画次数*/
animation-delay: 0s; /*延迟时间*/
}

@keyframes fadeIn {
  0% {
  opacity: 1; /*初始状态 透明度为0*/
  }
  100% {
  opacity: 0; /*结尾状态 透明度为1*/
  }
  }

js

collect(e) {
      this.setData({
        collectIndex: e.currentTarget.dataset.index
      })
    }