微信小程序利用animation實現元素翻轉到背面

效果如圖，正反面分別寫兩個元素，佈局讓兩個元素重疊

wxml的代碼：

<view class='rotateCtn'>
   <!--正面的框  -->
   <view class='{{frameClass1}}'  data-id='1'  bindtap='rotateFn' style='background-color:yellow'>
     正面
   </view>
   <!--背面的框  -->
   <view class='{{frameClass2}}'  bindtap='rotateFn' style='background-color:red'>
     反面
   </view>
</view>

preserve-3d可以顯示元素的3d示wxss代碼：

.rotateCtn{width: 100%;transform-style:preserve-3d;position:relative;}
.frame{width: 40%;height: 360rpx;position: absolute;}
.front{animation:front 1s linear 1;backface-visibility: hidden;}
.back{animation:back 1s linear 1;}
@keyframes front{from{transform: rotateY(0deg);}  to{transform: rotateY(180deg);}}
@keyframes back{from{transform: rotateY(-180deg);}  to{transform: rotateY(0deg);}}
.z1{z-index:6}
.z2{z-index:5}

js代碼：

  data: {
    frameClass1:'frame z1',//默認正面在上面
    frameClass2: 'frame z2'
  },
  rotateFn: function (e) {
    var that = this
    if (this.data.frameClass1=='frame z1'&&
      this.data.frameClass2=='frame z2'){
      that.setData({
        frameClass1: "frame front",
        frameClass2: "frame back",
      })
      setTimeout(function () {
        that.setData({
          frameClass1: "frame z2",
          frameClass2: "frame z1",
        })
      }, 1000);
    }
    else{
      that.setData({
        frameClass1: "frame back",
        frameClass2: "frame front",
      })
      setTimeout(function () {
        that.setData({
          frameClass1: "frame z1",
          frameClass2: "frame z2",
        })
      }, 1000);
    }
  },

 前端新人+菜鳥，有問題評論區討論一下哦