vue实现点击翻转效果

//html代码   测试 demo命名随便复制来的<div class="Demo">        <div class="Before" :class="isTop  ? 'contain-Before' : ''" @click="handleBefore"></div>        <div class="After" :class="isTop  ? 'contain-After' : ''" @click="handleAfter" style="font-size:20px;color:black">这个是背面内容</div>    </div>//在data中定义isTop:false//methods中的方法handleBefore(){  if(!this.isTop){         this.isTop = true     } }, handleAfter(){     if(this.isTop){         this.isTop = false     } }

//css.Demo{    width: 375px;    height: 300px;    margin-top: 50px;    /* margin-left: 500px; */    position: relative;    perspective: 800px;    box-sizing: border-box;        }.Before{    width: 100px;    height: 200px;    position: absolute;    top:0;    left: 0;    background-repeat: no-repeat;    background-position: center center;    backface-visibility: hidden;    transition: 1.5s;    background-image:url('../assets/images/chunfen4.jpg');    border:1px solid yellow; }.After{    width: 100px;    height: 200px;    position: absolute;    top:0;    left: 0;    color: #fff;    background-color:#fff;    text-indent: 2em;    transform: rotateY(-180deg);    backface-visibility: hidden;    transition: 1.5s;    border:1px solid yellow;}.Demo .contain-Before{    transform: rotateY(180deg);}.Demo .contain-After{    transform: rotateY(0deg);}