小程序翻转特效

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'

}

})

 

}

},