小程序实现点击动画效果

 更新时间: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;
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS仿Base.js实现的继承示例

    JS仿Base.js实现的继承示例

    这篇文章主要介绍了JS仿Base.js实现的继承,结合具体实例形式分析了javascript扩展操作及面向对象程序设计相关实现技巧,需要的朋友可以参考下
    2017-04-04
  • 微信小程序 子级页面返回父级并把子级参数带回父级实现方法

    微信小程序 子级页面返回父级并把子级参数带回父级实现方法

    这篇文章主要介绍了微信小程序 子级页面返回父级并把子级参数带回父级实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 在JavaScript中使用严格模式(Strict Mode)

    在JavaScript中使用严格模式(Strict Mode)

    这篇文章主要介绍了在JavaScript中使用严格模式(Strict Mode),除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。,需要的朋友可以参考下
    2019-06-06
  • JavaScript栏目列表隐藏/显示简单实现

    JavaScript栏目列表隐藏/显示简单实现

    隐藏侧边栏,并将图片换成右箭头图片;显示侧边栏,并将图片换成左箭头,这样的效果想必大家都很熟悉吧,接下来实现下,感兴趣的朋友可以参考下哈
    2013-04-04
  • 使用javascript获取flash加载的百分比的实现代码

    使用javascript获取flash加载的百分比的实现代码

    使用javascript获取flash加载的百分比的实现代码,方便flash小游戏判断页面,提高用户体验。
    2011-05-05
  • webpack常用配置总览(小结)

    webpack常用配置总览(小结)

    这篇文章主要介绍了webpack常用配置总览(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • js实现简单选项卡功能

    js实现简单选项卡功能

    这篇文章主要为大家详细介绍了使用JS实现简单的选项卡功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • JS Angular 服务器端渲染应用设置渲染超时时间​​​​​​​

    JS Angular 服务器端渲染应用设置渲染超时时间​​​​​​​

    这篇文章主要介绍了JS Angular服务器端渲染应用设置渲染超时时间,​​​​​​​通过setTimeout模拟一个需要5秒钟才能完成调用的API展开详情,需要的小伙伴可以参考一下
    2022-06-06
  • JS 学习总结之正则表达式的懒惰性和贪婪性

    JS 学习总结之正则表达式的懒惰性和贪婪性

    这篇文章主要介绍了JS 学习总结之正则表达式的懒惰性和贪婪性的相关资料,需要的朋友可以参考下
    2017-07-07
  • D3.js实现绘制折线图的教程详解

    D3.js实现绘制折线图的教程详解

    这篇文章主要为大家详细介绍了如何通过D3.js实现绘制折线图,文中的示例代码讲解详细,对我们学习D3.js有一定的帮助,需要的可以参考一下
    2022-11-11

最新评论