小程序实现点击动画效果

本文实例为大家分享了小程序实现点击动画效果的具体代码,供大家参考,具体内容如下

今天接到一个小程序优化需求,要实现一个点击的动画效果

考虑实现方法,使用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;
  }
}

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

(0)

相关推荐

  • 微信小程序按钮点击动画效果的实现

    动画效果如下: GIF看起来可能会有点卡 wxml <view class="confirm bubble">确定</view> wxss .confirm{ width: 325rpx; height: 80rpx; background: #07c160; border-radius: 6rpx; font-size: 30rpx; color: #fff; line-height: 80rpx; text-align: center; } .bubble{

  • 小程序实现点击动画效果

    本文实例为大家分享了小程序实现点击动画效果的具体代码,供大家参考,具体内容如下 今天接到一个小程序优化需求,要实现一个点击的动画效果 考虑实现方法,使用css的transition属性来进行实现,点击的时候给css新增一个active属性,就能实现这个效果了 // html  <view class="list-box">  <view class="list {{item.check ? 'active' : ''}}" wx:for="

  • 微信小程序开发animation心跳动画效果

    本文实例为大家分享了微信小程序开发animation心跳动画,供大家参考,具体内容如下 1.微信小程序开发animation心跳动画 wxml文件中: <view class="bottomViewItem"> <view class="bottomMiddleHeaderView" bindtap="voteClick" data-id="value"> <view class="bo

  • 小程序hover-class点击态效果实现

    微信小程序设置 hover-class,实现点击态效果 增强小程序触感,提高用户交互感知度 概念及注意事项 微信小程序中,可以用 hover-class 属性来指定元素的点击态效果.但是在在使用中要注意,大部分组件是不支持该属性的. 目前支持 hover-class 属性的组件有三个:view.button.navigator. 不支持 hover-class 属性的组件,同时也不支持 hover-stop-propagation.hover-start-time.hover-stay-time

  • 微信小程序实现点击卡片 翻转效果

    动画效果: wxml: <view class='main'> <!--正面的框 --> <view class="box b1" animation="{{animationMain}}" bindtap='rotateFn' data-id="1" > <image src=""></image> </view> <!--背面的框 -->

  • 微信小程序scroll-view点击项自动居中效果的实现

    scroll-view | 微信开放文档 效果 代码 布局样式代码省略,以下只展示逻辑代码 <scroll-view scroll-x scroll-left="{{scrollLeft}}" scroll-with-animation class="scroll-view"> <view class="class-item" wx:for="{{classList}}" wx:key="id&qu

  • 微信小程序页面缩放式侧滑效果的实现代码

    先给大家展示下效果图,大家感觉不错,请参考实现代码: 实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class. 由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点. 1.结构 <view class='page {{isFix?"pageShow":"pageHide"}}' > <view class='header'> <view class='h-toggle i

  • 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮修改字体颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="color:{{color}}">我是view标签</view> <view style="display:flex;"> <block wx:for="{{colorArray}}" wx:k

  • 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮修改文字大小功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="font-size:{{fontSize}}pt">我是view标签</view> <button class="btn" type="default" bindtap="magnifyFontS

  • 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{viewLeft}}px;">我是view标签</view> <button class="btn" type="default" bindtap="changeLocat

随机推荐