侧边栏特效

wxml:

<view class="page">

 <view class="bottom">

  <view class="content">

   <view class="nav">item1</view>

   <view class="nav">item2</view>

   <view class="nav">item3</view>

   <view class="nav">item4</view>

  </view>

 </view>

 <view class="top {{open ? 'state' : ''}}">

  <image bindtap="switch" src="/images/menu.png"></image>

 </view>

</view>

wxss:

.nav{

height:100rpx

}

.state{

 transform: rotate(0deg) scale(.8) translate(75%,0%);

 -webkit-transform: rotate(0deg) scale(.8) translate(75%,0%);

}

js：

Page({

 data:{

 open : false

 },

 switch(e){

 if(this.data.open){

  this.setData({

  open : false

  });

 }else{

  this.setData({

  open : true

  });

 }

 }

})