小程序实现点击动画效果

本文实例为大家分享了小程序实现点击动画效果的具体代码，供大家参考，具体内容如下

今天接到一个小程序优化需求，要实现一个点击的动画效果

考虑实现方法，使用css的transition属性来进行实现，点击的时候给css新增一个active属性，就能实现这个效果了

// html 
<view class="list-box">
 <view class="list {{item.check ? 'active' : ''}}" wx:for="{{listOne}}" data-id="{{item.id}}" wx:key="index" bindtap="bindClick">
     <view class="point">
         <image src="../../../img/sure-icon.png" mode="widthFix"/>
     </view>
     {{item.name}}
 </view>
</view>

// js
data: {
    listOne: [
      { id: 1, name: '弱音频', check:false},
      { id: 2, name: '中音频', check:false},
      { id: 3, name: '强音频', check:false}
    ]
}

// 点击方法
 bindClick (e) {
   let id = e.currentTarget.dataset.id
   let listOne = this.data.listOne.map(item => {
     if(item.id == id ){
       item.check = true
       // 选中以后需要执行的方法
     }else {
       item.check = false
     }
     return item
   }) 
   this.setData({listOne})
 },

// css 主要css是在active的位置，其余的可以根据设计稿样式自己改
.list-box{
    width: 660rpx;
    margin: 0 auto;
    margin-top: 71rpx;
    .list{
        height: 100rpx;
        background-color: #ffffff;
        box-shadow: 0rpx 5rpx 9rpx 0rpx rgba(79, 90, 103, 0.09);
        border-radius: 16rpx;
        border: 3px solid transparent;
        transition: all 0.4s;
        position: relative;
        text-align: center;
        line-height: 100rpx;
        font-family: Source Han Sans CN;
        font-size: 36rpx;
        font-weight: bold;
        color: #0f2655;
        margin-bottom: 33rpx;
    }    
      .point {
        position: absolute;
        background: #8bc63e;
        width: 36rpx;
        height: 36rpx;
        bottom: 0;
        right: 0;
        border-radius: 8px 0 0 0px;
        transition: all 0.4s;
        opacity: 0;
    image{
        display: none;
    }
  }
    .list.active {
        border: 3px  solid #8bc63e;
    // box-shadow:0px 6px 10px 0px rgba(0, 0, 0, 0.3);
  }
  .list.active .list-title{
        transition: all 0.4s;
        color: #8bc63e;
  }
  .list.active .list-bold{
        transition: all 0.4s;
        color: #8bc63e;
    }
  .list.active  .point {
        opacity: 1;
        position: absolute;
        background: #8bc63e;
        width: 36rpx;
        height: 36rpx;
        bottom: 0;
        right: 0;
        border-radius: 8px 0 0 0px;
  }
  .list.active  .point image{
        // transition: all 0.3s;
        display: block;
        width: 19rpx;
        height: 14rpx;
        margin-top: 14rpx;
        margin-left: 12rpx;
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。