- 实现思路
将两个元素放到同一个容器中，然后分别对两个元素添加旋转动画，利用css3属性backface-visibility：将元素翻转到背面时，元素不可见。
卡片正面
卡片背面，即奖品面
- 代码实现
<div class="container">
<div class="front"><img src="https://upload-images.jianshu.io/upload_images/6517590-8812434200d9c6d8.png" alt=""></div>
<div class="back"><img src="https://upload-images.jianshu.io/upload_images/6517590-e669ad0884c50f37.png" alt=""></div>
</div>
CSS
.container {
position: relative;
width: 100px;
}
img {
width: 100px;
}
.front, .back {
position: absolute;
left: 0;
top: 0;
backface-visibility: hidden;
}
.front {
transform: rotateY(0deg);
}
.back {
transform: rotateY(-180deg)
}
.toback {
transform: rotateY(180deg);
}
.tofront {
transform: rotateY(0deg);
}
.front,
.back {
transition: all 1s;
}
JS
$(function() {
$( ".container" ).on('click', function () {
$( ".front" ).addClass('toback');
$( ".back" ).addClass('tofront');
})
});
-
其他
业务中，有4张卡片，任意抽中一个，根据后端返回的中奖结果进行展示，因此需要将已中奖元素放置到用户点击的卡片位置。
如：
用户点击了第四张图
抽奖区
后端返回了以下数据，其中中奖的数据在第二个位置
[
{
name: '一等奖',
isLucky: false,
},
{
name: '普通奖',
isLucky: true,
},
{
name: '二等奖',
isLucky: false,
},
{
name: '三等奖',
isLucky: false,
},
]
这里就要让
数组元素位置互换：将中奖元素切换到点击的位置
splice对数组元素进行添加/删除，返回被删除的元素。
arr.splice(index,howmany,item1,.....,itemX)
其中index是操作数组元素的开始位置,howmany是删除元素的数目,item1,.....,itemX是添加的元素。
swapItem = (arr, fromIndex, toIndex) => {
arr[toIndex] = arr.splice(fromIndex, 1, arr[toIndex])[0];
return arr;
};
