微信小程式利用animation實現元素翻轉到背面
阿新 • • 發佈:2018-12-31
效果如圖,正反面分別寫兩個元素,佈局讓兩個元素重疊
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); } },
前端新人+菜鳥,有問題評論區討論一下哦