- 实现思路
将两个元素放到同一个容器中,然后分别对两个元素添加旋转动画,利用css3属性backface-visibility
:将元素翻转到背面时,元素不可见。
- 代码实现
<div class="container">
<div class="front"><img src="https://img.haomeiwen.com/i6517590/8812434200d9c6d8.png" alt=""></div>
<div class="back"><img src="https://img.haomeiwen.com/i6517590/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;
};
网友评论