小程序實現點擊動畫效果

第小程序實現點擊動畫效果本文實例為大家分享了小程序實現點擊動畫效果的具體代碼，供大家參考，具體內容如下

今天接到一個小程序優(yōu)化需求，要實現一個點擊的動畫效果

考慮實現方法，使用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

//選中以后需要執(zhí)行的方法

}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