小程序翻轉特效

1. wxml............................................

   <view class='rotateCtn'>
2.  
   <!--正面的框 -->
3.  
   <view class='{{frameClass1}}' data-id='1' bindtap='rotateFn' style='
4.  
   正面
5.  
   </view>
6.  
   <!--背面的框 -->
7.  
   <view class='{{frameClass2}}' bindtap='rotateFn' style='
8.  
   反面
9.  
   </view>
10.  
    </view>

css......................................

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

    

    

    

   js。。。。。。。。。。。。。。。。。。。。

1. data: {
2.  
   frameClass1:'frame z1',//默認正面在上面
3.  
   frameClass2: 'frame z2'
4.  
   },
5.  
   rotateFn: function (e) {
6.  
   var that = this
7.  
   if (this.data.frameClass1=='frame z1'&&
8.  
   this.data.frameClass2=='frame z2'){
9.  
   that.setData({
10.  
    frameClass1: "frame front",
11.  
    frameClass2: "frame back",
12.  
    })
13.  
    setTimeout( function () {
14.  
    that.setData({
15.  
    frameClass1: "frame z2",
16.  
    frameClass2: "frame z1",
17.  
    })
18.  
    }, 1000);
19.  
    }
20.  
    else{
21.  
    that.setData({
22.  
    frameClass1: "frame back",
23.  
    frameClass2: "frame front",
24.  
    })
25.  
    setTimeout( function () {
26.  
    that.setData({
27.  
    frameClass1: "frame z1",
28.  
    frameClass2: "frame z2",
29.  
    })
30.  
    }, 1000);
31.  
    }
32.  
    },

只是記錄非原創

 

侷限性：頁面高度超過屏幕高度時下導航翻轉效果會出現問題

 

解決方式：

將導航單獨放在.rotateCtn外面

<!----footer下導航 藍色---->

 

 

<view class='fotnav t_cen font_26' hidden='{{navflag}}' style="top:{{fixtop}}px;">

<view style='width:33.33%;'>

<image class='fnavi' src='../images/img/cgfoti_1.png'></image>

<view class='col_b'>工做臺</view>

</view>

<view bindtap='rotateFn' style='width:33.33%; position:relative;'>

<view class='ftchangpat'>

<image class='fnavi' style="width:50rpx; height:50rpx; position:relative; top:8rpx;" src='../images/img/cgfoti_2.png'></image>

</view>

<view class='col_b cgdhpat'>採購定貨端</view>

</view>

 

<view bindtap='tocgdcenter' style='width:33.33%;'>

<image class='fnavi' src='../images/img/cgfoti_3_.png'></image>

<view>會員中心</view>

</view>

</view>

<!----footer下導航 紅色---->

 

<view class='fotnav t_cen font_26' hidden='{{!navflag}}' style="top:{{fixtop}}px;">

<view style='width:33.33%;'>

<image class='fnavi' src='../images/img/smglti_1.png'></image>

<view class='col_r'>採購定貨</view>

</view>

<view bindtap='rotateFn' style='width:33.33%; position:relative;'>

<view class='ftchangpat_r'>

<image class='fnavi' style="width:64rpx; height:64rpx; position:relative; top:8rpx;" src='../images/img/smglti_2.png'></image>

</view>

<view class='cgdhpat col_r'>商貿管理端</view>

</view>

<view bindtap='toncgcenter' style='width:33.33%;'>

<image class='fnavi' src='../images/img/smglti_3.png'></image>

<view>個人</view>

</view>

 

</view>

 

翻轉效果修改後：

解決兩個頁面跳轉之間上導航顏色需過渡變化的問題

//翻轉效果

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",

navflag:true

})

}, 1000);

 

//var navbg=that.data.navbg; 紅色導航

wx.setNavigationBarColor({

frontColor: '#ffffff', // 必寫項

backgroundColor: '#dc4545', // 必寫項

animation: { // 可選項

duration: 400,

timingFunc: 'easeIn'

}

})

}

else {

that.setData({

frameClass1: "frame back",

frameClass2: "frame front"

})

setTimeout(function () {

that.setData({

frameClass1: "frame z1",

frameClass2: "frame z2",

navflag:false

})

}, 1000);

 

//var navbg = that.data.navbg; 藍色導航

wx.setNavigationBarColor({

frontColor: '#ffffff', // 必寫項

backgroundColor:'#008de6', // 必寫項

animation: { // 可選項

duration: 400,

timingFunc: 'easeIn'

}

})

 

}

},