小程序?qū)崿F(xiàn)點擊動畫效果

更新時間：2022年04月11日 08:50:39 作者：深圳最菜的前端

這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)點擊動畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

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

// 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: '強(qiáng)音頻', check:false}
? ? ]
}

// 點擊方法
?bindClick (e) {
? ?let id = e.currentTarget.dataset.id
? ?let listOne = this.data.listOne.map(item => {
? ? ?if(item.id == id ){
? ? ? ?item.check = true
? ? ? ?// 選中以后需要執(zhí)行的方法
? ? ?}else {
? ? ? ?item.check = false
? ? ?}
? ? ?return item
? ?})?
? ?this.setData({listOne})
?},

// css 主要css是在active的位置，其余的可以根據(jù)設(shè)計稿樣式自己改
.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;
? }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: