小程序实现点击动画效果
更新时间:2022年04月11日 08:50:39 作者:深圳最菜的前端
这篇文章主要为大家详细介绍了小程序实现点击动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序实现点击动画效果的具体代码,供大家参考,具体内容如下
今天接到一个小程序优化需求,要实现一个点击的动画效果
考虑实现方法,使用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; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
在JavaScript中使用严格模式(Strict Mode)
这篇文章主要介绍了在JavaScript中使用严格模式(Strict Mode),除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。,需要的朋友可以参考下2019-06-06使用javascript获取flash加载的百分比的实现代码
使用javascript获取flash加载的百分比的实现代码,方便flash小游戏判断页面,提高用户体验。2011-05-05JS Angular 服务器端渲染应用设置渲染超时时间
这篇文章主要介绍了JS Angular服务器端渲染应用设置渲染超时时间,通过setTimeout模拟一个需要5秒钟才能完成调用的API展开详情,需要的小伙伴可以参考一下2022-06-06
最新评论