如何将小程序点击动画效果改写为长尾词？

本文共计605个文字，预计阅读时间需要3分钟。

原文：本文实例为大家分享了一个小程序实现点击动画效果的完整代码，供大家参考。今天接到一个小程序优化需求，要实现一个点击的动画效果。

修改后：本文提供了一个实现点击动画效果的小程序代码示例，适合参考。近日，接到优化任务，需实现点击动画效果。考虑实现方法，可利用CSS的`transition`属性。

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

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

考虑实现方法，使用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;   } }

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