经典卡片翻转动画实现，前端码农是如何进入腾讯的

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’);

})

},

增加卡片登场keyframes动画

====================================================================================

&.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”>