



下載本文檔
版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
第小程序實現點擊動畫效果本文實例為大家分享了小程序實現點擊動畫效果的具體代碼,供大家參考,具體內容如下
今天接到一個小程序優(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
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 電商選品師崗位面試問題及答案
- 電機銷售員崗位面試問題及答案
- 財務風控專員崗位面試問題及答案
- 網絡信息內容審核員崗位面試問題及答案
- 私域流量運營師崗位面試問題及答案
- 河北省滄州市孝子墓中學2025年高一化學第二學期期末預測試題含解析
- 云南省元江民中2025屆高一下化學期末達標檢測模擬試題含解析
- 2025屆廣西梧州市岑溪市高一下化學期末統(tǒng)考試題含解析
- 公園流動漁具管理辦法
- 春節(jié)車票報銷管理辦法
- 水泥場地改造方案(3篇)
- 資材部安全生產責任制
- 既有建筑節(jié)能綜合改造項目可行性研究報告
- 貴州省銅仁市萬山區(qū)2024-2025學年部編版七年級下學期6月期末歷史試題(含答案)
- 2025年工程管理基礎知識考試試卷及答案
- 礦山生態(tài)修復方案
- 2024年江西省公安廳招聘警務輔助人員考試真題
- 聯(lián)想銷售人員管理制度
- 貴州2023年高中學業(yè)水平合格性考試地理試卷真題(含答案詳解)
- 乙烯 - 辛烯溶液共聚反應機理及聚合物鏈結構調控策略探究
- 煤礦隱蔽致災因素普查成果礦井自查表
評論
0/150
提交評論