margin: auto;
.flap-card-circle{
display: flex;
width: 100%;
height: 100%;
.flap-card-semi-circle{
flex: 0 0 50%;
width: 50%;
height: 100%;
background-repeat: no-repeat;
}
.flap-card-semi-circle-left{
border-radius: px2rem(24) 0 0 px2rem(24);
background-position: center right;
}
.flap-card-semi-circle-right{
border-radius:0 px2rem(24) px2rem(24) 0;
background-position: center left;
}
}
}
}
.close-btn-wrapper{
position: absolute;
left: 0;
bottom: px2rem(30);
z-index:1100;
width: 100%;
@include center;
.icon-close{
width: px2rem(45);
height: px2rem(45);
font-size: px2rem(25);
border-radius: 50%;
background: #333;
color: white;
font-size: px2rem(25);
@include center
}
}
}
用到的store.js资源
export const flapCardList = [
{
r:255,
g:102,
_g:102,
b:159,
imgLeft:‘url(’+require(“./…/assets/images/gift-left.png”) + ‘)’,
imgRight:‘url(’+require(“./…/assets/images/gift-right.png”) + ‘)’,
backgroundSize: ‘50% 50%’,
zIndex:100,
rotateDegree:0
},
{
r:74,
g:171,
_g:171,
b:255,
imgLeft:‘url(’+require(“./…/assets/images/compass-left.png”) + ‘)’,
imgRight:‘url(’+require(“./…/assets/images/compass-right.png”) + ‘)’,
backgroundSize: ‘50% 50%’,
zIndex:99,
rotateDegree:0
},
{
r:74,
g:171,
_g:171,
b:255,
imgLeft:‘url(’+require(“./…/assets/images/crown-left.png”) + ‘)’,
imgRight:‘url(’+require(“./…/assets/images/crown-right.png”) + ‘)’,
backgroundSize: ‘50% 50%’,
zIndex:99,
rotateDegree:0
},
{
r:74,
g:171,
_g:171,
b:255,
imgLeft:‘url(’+require(“./…/assets/images/heart-left.png”) + ‘)’,
imgRight:‘url(’+require(“./…/assets/images/heart-right.png”) + ‘)’,
backgroundSize: ‘50% 50%’,
zIndex:99,
rotateDegree:0
}
];
mounted(){
this.startFlapCardAnimation();
}
startFlapCardAnimation(){
this.prepare();
setInterval(()=>{
this.flapCardRotate();
},25)
},
prepare(){
const backFlapCard = this.flapCardList[this.back];
backFlapCard.rotateDegree =180;
backFlapCard._g = backFlapCard.g - 5*9;
this.rotate(this.back,‘back’);
},
rotate(index,type){
const item = this.flapCardList[index];
let dom;
if (type === ‘front’){
dom = this.$refs.right[index];
} else {
dom = this.$refs.left[index];
}
dom.style.transform = rotateY(${item.rotateDegree}deg)
;
dom.style.backgroundColor = rgb(${item.r},${item._g},${item.b})
;
},
flapCardRotate(){
const frontFlapCard = this.flapCardList[this.front];
const backFlapCard = this.flapCardList[this.back];
frontFlapCard.rotateDegree += 10;
backFlapCard.rotateDegree -= 10;
frontFlapCard._g -= 5;
backFlapCard._g += 5;
if (backFlapCard.rotateDegree<90){
backFlapCard._g += 5;
}
if(frontFlapCard.rotateDegree ===90 && backFlapCard.rotateDegree ===90){
backFlapCard.zIndex +=2;
}
this.rotate(this.front,‘front’);
this.rotate(this.back,‘back’);
if (frontFlapCard.rotateDegree ===180 && backFlapCard.rotateDegree ===0){
this.next();
}
},
next(){
const frontFlapCard = this.flapCardList[this.front];
const backFlapCard = this.flapCardList[this.back];
frontFlapCard.rotateDegree =0;
backFlapCard.rotateDegree =0;
frontFlapCard._g = frontFlapCard.g;
backFlapCard._g = backFlapCard.g;
this.rotate(this.front,‘front’);
this.rotate(this.back,‘back’);
this.front++;
this.back++;
const len = this.flapCardList.length;
if(this.front>= this.flapCardList.length){
this.front = 0;
}
if(this.back>= this.flapCardList.length){
this.back = 0;
}
this.flapCardList.forEach((item,index)=>{
item.zIndex = 100 - ((index - this.front+ len)%len);
});
this.prepare();
},
semiCircleStyle(item,dir){
return{
backgroundColor:rgb(${item.r},${item.g},${item.b})
,
backgroundSize:item.backgroundSize,
backgroundImage:dir === ‘left’? item.imgLeft:item.imgRight
}
},
close(){
console.log(“hah”);
this.setFlapCardVisible(false);
}
尽管不懂,似乎这样一个组件就是独立的哦,嘿嘿嘿。
、
卡片翻转动画重置
close(){
this.setFlapCardVisible(false);
this.stopAnimation();
},
stopAnimation(){
if (this.task){
clearInterval(this.task);
}
this.reset();
}
reset(){
this.front = 0;
this.back = 1
this.flapCardList.forEach((item,index)=>{
item.zIndex = 100 - index;
item._g = item.g;
item.rotateDegree = 0;
this.rotate(index,‘front’);
this.rotate(index,‘back’);
})
},
====================================================================================
&.animation{
animation: flap-card-move .3s ease-in;
}
@keyframes flap-card-move {
0%{
transform: scale(0);
opacity: 0;
}
50%{
transform: scale(1.2);
}
75%{
transform: scale(.9);
opacity: 1;
}
100%{
transform: scale(1);
opacity: 1;
}
}
=========================================================================
=======================================================================
:style=“semiCircleStyle(item,‘left’)” ref=“left”>
:style=“semiCircleStyle(item,‘right’)” ref=“right”>