收藏
回答

使用wx.for 渲染了6个按钮,点击其中一个按钮后,其他5个按钮消失,但是只有第一个按钮显示动画?

使用animation动画效果


wxml


<view class="container">
  <view class="page-body">
    <view class="page-section">


      <view class="animation-element-wrapper">
        <view class="animation-element" animation="{{animation2}}"></view>
      </view>
      <view class="animation-buttons" scroll-y="true">
        <button wx:for="{{buttons}}" wx:key="ids" data-item="item" data-index="{{index}}" animation="{{animation2[index]}}" class="animation-button" bindtap="jianyin">渐隐</button>
    
      </view>
    </view>
  </view>
</view>


js

Page({
  data: {  
    animation2: [{},{},{},{},{},{}],
    buttons: [
      {text:'Button 1',ids:0,selected:true},
      {text:'Button 2',ids:1,selected:true},
      {text:'Button 3',ids:2,selected:false},
      {text:'Button 4',ids:3,selected:true},
      {text:'Button 5',ids:4,selected:true},
      {text:'Button 6',ids:5,selected:false},
      ]  
  },  

  jianyinfunction (e{
   
    var index2 = e.currentTarget.dataset.index // 获取点击的按钮索引  
    console.log(index2)
   
    const A = wx.createAnimation({  
        duration500// 动画持续时间(单位:毫秒)  
        timingFunction'ease'// 定义动画的效果曲线  
      });  
      // 渐隐效果  
    A.opacity(0).step();

    let animation2 = this.data.animation2

  
    let newArray = animation2.map((mu,index) => {  
      if (index !== index2) {  
        return A.export();  
      } else {  
        return mu;  
      }  
    }) 
    console.log(newArray)
    this.setData({ animation2:newArray}); 
    console.log (this.data.animation2)
  },
  
})


css


.animation-element-wrapper {
  display: flex;
  width100%;
  padding-top150rpx;
  padding-bottom150rpx;
  justify-content: center;
  overflow: hidden;
  background-color#ffffff;
}
.animation-element {
  width200rpx;
  height200rpx;
  background-color#1AAD19;
}
.animation-buttons {
  padding30rpx 50rpx 10rpx;
  width100%;
  height700rpx;
  box-sizing: border-box;
}
.animation-button {
  float: left;
  line-height2;
  width300rpx;
  margin15rpx 12rpx;
}


.animation-button-reset {
  width620rpx;
}



控制台:


回答关注问题邀请回答
收藏
登录 后发表内容