效果:点击开启 旋转180度 显示关闭(如图)
实现过程
1.这是html
<view class='expriment-content'>
<view class='flips'>
<view class='flip b1' animation="{{animationMain}}" bindtap='roateTap' data-id='1'>
<text>开启</text>
</view>
<view class='flip b2' animation="{{animationBack}}" bindtap='roateTap' data-id='2'>
<text>关闭</text>
</view>
</view>
</view>
2.这是css
page {
width: 100%;
height: 100%;
}
.expriment-content {
width: 100%;
height: 100%;
}
.flips {
position: relative;
}
.flip {
width: 66px;
height: 66px;
line-height: 66px;
text-align: center;
position: absolute;
top: 50px;
left: 50px;
transition: all 1s;
backface-visibility: hidden;
}
.b1 {
background-color: pink;
}
.b2 {
background-color: skyblue;
transform: rotateY(-180deg);
}
3.这是js
data: {
animationMain: null,
animationBack: null
},
roateTap: function(e) {
console.log(e)
let id = e.currentTarget.dataset.id;
this.animation_main = wx.createAnimation({
duration: '400',
timingFunction: 'linear'
})
this.animation_bank = wx.createAnimation({
duration: '400',
timingFunction: 'linear'
})
if (id == 1) {
// 点击正面
this.animation_main.rotateY(180).step()
this.animation_bank.rotateY(0).step()
this.setData({
animationMain: this.animation_main.export(),
animationBack: this.animation_bank.export(),
})
} else {
this.animation_main.rotateY(0).step()
this.animation_bank.rotateY(-180).step()
this.setData({
animationMain: this.animation_main.export(),
animationBack: this.animation_bank.export(),
})
}
},
属性总结:
1. backface-visibility:隐藏被旋转的 div 元素的背面
属性值:
visible :背面是可见的。
hidden:背面是不可见的。
2. transform: rotateY(-180deg); 旋转180度后,背面