小程序实现点击动画效果
时间：2022-07-31 09:20:23|栏目：JavaScript代码|点击： 次
本文实例为大家分享了小程序实现点击动画效果的具体代码，供大家参考，具体内容如下
今天接到一个小程序优化需求，要实现一个点击的动画效果
考虑实现方法，使用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;
}
}
