小程序實現(xiàn)點擊動畫效果

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

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

考慮實現(xiàn)方法，使用css的transition屬性來進行實現(xiàn)，點擊的時候給css新增一個active屬性，就能實現(xiàn)這個效果了

//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的位置，其余的可以根據(jù)設計稿樣式自己改

.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