使用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},
]
},
jianyin: function (e) {
var index2 = e.currentTarget.dataset.index // 获取点击的按钮索引
console.log(index2)
const A = wx.createAnimation({
duration: 500, // 动画持续时间(单位:毫秒)
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;
width: 100%;
padding-top: 150rpx;
padding-bottom: 150rpx;
justify-content: center;
overflow: hidden;
background-color: #ffffff;
}
.animation-element {
width: 200rpx;
height: 200rpx;
background-color: #1AAD19;
}
.animation-buttons {
padding: 30rpx 50rpx 10rpx;
width: 100%;
height: 700rpx;
box-sizing: border-box;
}
.animation-button {
float: left;
line-height: 2;
width: 300rpx;
margin: 15rpx 12rpx;
}
.animation-button-reset {
width: 620rpx;
}
控制台: