卡片翻转

思路：一个view框内放两个view，分别存放卡片的正面和反面信息，这两个view重叠，并且反面卡片翻转180°，翻转的时候，如果点击的是正面卡片，则正面卡片翻转180°，反面0°，如果点击的是反面卡片则反之。

小程序二维码

wxml

<view class="container main">
 <view class="card card1" data-id="1" bindtap="rotateFn" animation="{{animation1}}">
 <image src="https://cn.bing.com/th?id=OIP.DXfBBfNamAfBXlJEFavYKQHaE6&pid=Api&rs=1&p=0"></image>
 </view>
 <view class="card card2" data-id="2" bindtap="rotateFn" animation="{{animation2}}">
 <image src="https://cn.bing.com/th?id=OIP.gK2kn78jlICbjchJ8-Zb1QHaE8&pid=Api&rs=1&p=0"></image>
 </view>
</view>

wxss

.main {
 position: absolute;
 top:0;
 left:0;
 right:0;
 bottom: 0;
 margin: 10rpx auto;
 width: 600rpx;
 height: 400rpx;
}
.card {
 position: absolute;
 top:0;
 left:0;
 transition: all 1s;
 /* 不显示背面 */
 backface-visibility: hidden;
 width: 600rpx;
 height: 400rpx;
 border-radius: 10rpx;
 cursor: pointer;
 border: 2rpx solid red;
}
.card1 {
 /* background: pink; */
}
.card2 {
 /* background: yellow; */
 /* 默认显示正面 */
 transform: rotateY(-180deg); 
}
.card image {
 width: 600rpx;
 height: 400rpx;
}

js中，先在data中声明两个动画

data: {
 animation1: null,//正面卡片动画
 animation2: null,//背面卡片动画
},

实例化一个animation对象

animation: wx.createAnimation({
 duration: 1000,
 timingFunction: 'linear'
}),

点击卡片后的翻转事件，首先判断点击的是正面卡片还是反面卡片，然后输出不同的动画效果

rotateFn(e) {
 let that = this
 let id = e.currentTarget.dataset.id
 // 点击正面
 if(id == 1) {
 this.setData({
 animation1: that.animation.rotateY(180).step().export(),
 animation2: that.animation.rotateY(0).step().export()
 })
 } else { //点击反面
 this.setData({
 animation1: that.animation.rotateY(0).step().export(),
 animation2: that.animation.rotateY(180).step().export()
 })
 }
},

完整代码请大家移步我的GitHub