前言
在我们日常项目开发中，我们经常会做一些翻转功能，所以封装了这款功能组件。
翻转组件
属性
1. isBack
是否显示反面
值为布尔类型
默认值：false
2. duration
动画时长
值为数值类型，单位：毫秒
默认值：325
3. direction
翻转方向
值为‘x’或者‘y’
x：沿x轴方向翻转，y：沿y轴方向翻转
默认值：‘y’
插槽
1. front
正面内容插槽
2. back
反面内容插槽
示例代码
<template><divclass="flip-demo"><divclass="flip-wrap"><BaseFlip:isBack="true":duration="350"direction="y"><imgslot="front"src="./img/card-a.png"alt=""><imgslot="back"src="./img/card-b.png"alt=""></BaseFlip></div><divclass="flip-wrap"><BaseFlip:isBack="false":duration="240"direction="x"><imgslot="front"src="./img/card-a.png"alt=""><imgslot="back"src="./img/card-b.png"alt=""></BaseFlip></div></div></template><script>importBaseFlipfrom'@/components/base/flip/index.vue'exportdefault{name:'FlipDemo',components:{BaseFlip}}</script><stylelang="scss"scoped>.flip-demo{.flip-wrap{position:relative;width:254px;height:440px;margin:60pxauto;img{width:100%;height:100%;}}}</style>#实现flip.vue```js<!--翻转组件--><template><divclass="card"@click="doSwitch"><divclass="flip":class="[frontStatus]":style="durationStyle"><slotname="front"></slot></div><divclass="flip":class="[backStatus]":style="durationStyle"><slotname="back"></slot></div></div></template><script>exportdefault{name:'Flip',props:{//是否反面isBack:{type:Boolean,default:false},//动画时长，单位：毫秒duration:{type:Number,default:325},//方向,x：沿x轴方向翻转，y：沿y轴方向翻转direction:{type:String,default:'y'}},data(){letdata={backFlag:this.isBack,frontStatus:'',backStatus:''}if(this.isBack){data.frontStatus='hidde'}else{data.backStatus='hidde'}returndata},computed:{durationStyle(){return{animationDuration:`${this.duration}ms`}}},watch:{backFlag(flag){if(flag){this.frontStatus='out-'+this.directionsetTimeout(()=>{this.$set(this,'backStatus','in-'+this.direction)},this.duration)}else{this.backStatus='out-'+this.directionsetTimeout(()=>{this.$set(this,'frontStatus','in-'+this.direction)},this.duration)}}},methods:{doSwitch(){this.backFlag=!this.backFlagthis.$emit('flip',this.backFlag)}}}</script><stylelang="scss"scoped>.card,.flip{position:absolute;top:0;left:0;right:0;bottom:0;}.flip{backface-visibility:hidden;transform:translateX(0);}.in-x{animation-name:flipintobottom;//animation-duration:325ms;animation-timing-function:ease-out;}.out-x{transform:rotateX(-90deg)scale(.9);animation-name:flipouttotop;animation-timing-function:ease-in;//animation-duration:325ms;}.in-y{animation-name:flipintoright;//animation-duration:325ms;animation-timing-function:ease-out;}.out-y{transform:rotateY(-90deg)scale(.9);animation-name:flipouttoleft;animation-timing-function:ease-in;//animation-duration:325ms;}@keyframesflipouttoleft{from{transform:rotateY(0);}to{transform:rotateY(-90deg)scale(.9);}}@keyframesflipintoright{from{transform:rotateY(90deg)scale(.9);}to{transform:rotateY(0);}}@keyframesflipouttotop{from{transform:rotateX(0);}to{transform:rotateX(-90deg)scale(.9);}}@keyframesflipintobottom{from{transform:rotateX(90deg)scale(.9);}to{transform:rotateX(0);}}.hidde{opacity:0;}</style>