vue-多个卡片翻转动效

<van-grid :column-num="2" class="content" :border="false" >
　　<van-grid-item class="box" v-for="(item2,index2) in list" :key="index2" >
　　　　<div class="inner-box" v-if="!item2.isBack" @touchstart="touchstartevent(item2,index2)" @touchmove="touchmoveevent(item2,index2)" @touchend="touchendevent(item2,index2)" >
　　　　　　<span>正面</span>
　　　　</div>
　　　　<div class="inner-box-back" @click.stop="deleteModel(item2,index2)" v-else> 　　　

　　　　　　<span>删除</span> 

　　　　</div>
　　 </van-grid-item>
</van-grid>　　

// 模板长按删除功能
touchstartevent(item,index){
　　this.closeDeleteevent()//清除删除图标事件
　　var self = this;
　　this.timeoutEvent = 0;
　　this.timeoutEvent = setTimeout(() => {
　　　　self.enterLongevent(item,index);//长按执行的操作
　　},1000)
},
enterLongevent(item,index){
　　item.isBack = true;
　　console.log("长按了呀")
},
touchmoveevent(item,index){
　　console.log("移动了")
　　clearTimeout(this.timeoutEvent)
　　this.timeoutEvent = 0;
},
touchendevent(item,index){
　　console.log("离开屏幕")
　　clearTimeout(this.timeoutEvent)
　　this.timeoutEvent = 0;
},

.inner-box{
　　width: 100%;
　　border-radius: 10px;
　　border: 1px solid #f2f2f2;
　　-webkit-touch-callout: none!important;
　　-webkit-user-select: none!important;
　　-moz-user-select:none;
　　-ms-uese-select:none;
　　user-select: none;
　　animation: mymoveone 0.5s ease-in-out;
}
@keyframes mymoveone{
　　from{
　　opacity: 0;
　　　　transform: rotateY(90deg);
　　}
to{
　　opacity: 1;
　　　　transform: rotateY(0);
　　}
}
.inner-box-back{
　　width: 100%;
　　height: 99px;
　　animation: mymove 0.5s ease-in-out;
　　border-radius: 10px;
　　border: 1px solid #f2f2f2;
　　background: fff;
　　display: flex;
　　flex-direction: column;
　　justify-content: center;
　　align-items: center;
　　font-size: #333333;
}
@keyframes mymove{
　　from{
　　　　opacity: 0;
　　　　transform: rotateY(-90deg);
　　}
　　to{
　　　　opacity: 1;
　　　　transform: rotateY(0);
　　}
}

效果：

暂时无法显示