小程序实现点击动画效果

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

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

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

//html

view

viewclass="list{{item.check'active':''}}"wx:for="{{listOne}}"data-id="{{item.id}}"wx:key="index"bindtap="bindClick"

view

imagesrc="../../../img/sure-icon.png"mode="widthFix"/

/view

{{}}

/view

/view

//js

data:{

listOne:[

{id:1,name:'弱音频',check:false},

{id:2,name:'中音频',check:false},

{id:3,name:'强音频',check:false}

]

//点击方法

bindClick(e){

letid=e.currentTarget.dataset.id

letlistOne=this.data.listOne.map(item={

if(item.id==id){

item.check=true

//选中以后需要执行的方法

}else{

item.check=false

}

returnitem

})

this.setData({listOne})

},

//css主要css是在active的位置，其余的可以根据设计稿样式自己改

.list-box{

width:660rpx;

margin:0auto;

margin-top:71rpx;

.list{

height:100rpx;

background-color:#ffffff;

box-shadow:0rpx5rpx9rpx0rpxrgba(79,90,103,0.09);

border-radius:16rpx;

border:3pxsolidtransparent;

transition:all0.4s;

position:relative;

text-align:center;

line-height:100rpx;

font-family:SourceHanSansCN;

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:8px000px;

transition:all0.4s;

opacity:0;

image{

display:none;

}

.list.active{

border:3px

solid#8bc63e;

//box-shadow:0px6px10px0pxrgba(0,0,0,0.3);

.list.active.list-title{

transition:all0.4s;

color:#8bc63e;

.list.active.list-bold{

transition:all0.4s;

color:#8bc63e;

}

.list.active

.point{

opacity:1;

position:absolute;

background:#8bc63e;

width:36rpx;

height:36rpx;

bottom:0;

right:0;

border-radius:8px000px;

.list.active

.pointimage{

//transition:all0.3s;

display:block;

width:1