小程序实现点击动画效果

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

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

小程序实现点击动画效果插图

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

标签

发表评论