-
wxml............................................<view class='rotateCtn'>
-
<!--正面的框 -->
-
<view class='{{frameClass1}}' data-id='1' bindtap='rotateFn' style='
-
正面
-
</view>
-
<!--背面的框 -->
-
<view class='{{frameClass2}}' bindtap='rotateFn' style='
-
反面
-
</view>
-
</view>
css......................................
-
.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);
-
}
-
},
只是记录非原创
局限性：页面高度超过屏幕高度时下导航翻转效果会出现问题
解决方式：
将导航单独放在.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'
}
})
}
},