效果圖：
實作原理：點選按鈕，往需要動畫的div中添加或移除擁有動畫效果的class。
由于微信小程式中不能操作page這個根節點，是以，隻有用一個div（view）來模仿page根節點。
1.結構
<view class=\'page {{isFix?"pageShow":"pageHide"}}\' >
<view class=\'header\'>
<view class=\'h-toggle iconfont icon-list\' bindtap=\'pageBtn\'></view>
</view>
</view>
<view class=\'r-box {{isFix?"fixShow":"fixHide"}}\' bindtap=\'fixHide\'>
<view class=\'r-list\' catchtap=\'fixStopBu\'>
<view class=\'rl-close\' catchtap=\'fixClose\'>
<text class=\'iconfont icon-close\'></text>
</view>
</view>
</view> 上面的是最主要的結構，其它的内容就不貼了。
(1) isFix是切換動畫名的狀态
(2) r-box設定了bindtap點選事件之後，r-list也設定了一個不冒泡的catchtap事件，是為了實作點選r-box的空白處時，不冒泡的效果。
2.樣式
page {
height: 100%;
width: 100%;
}
.page {
width: 100%;
height: 100%;
box-shadow: 0 0 10px rgba(26,26,26,.1);
}
.r-box {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.r-box .r-list {
float: right;
width: 66%;
height: 100%;
background: white;
}
.fixHide {
transition: all .3s ease;
transform: translateX(100%);
}
.fixShow {
transition: all .3s ease;
transform: translateX(0%);
}
.pageHide {
transition: all .3s ease;
transform: translateX(0) scaleY(1);
}
.pageShow {
transition: all .3s ease;
transform: translateX(-70%) scaleY(0.9);
} 這些是最主要的樣式：
(1) class為page的div（view），就是模拟整個page頁面，是以寬高需要設為100%。
(2) r-box是右邊側滑的div（view）
(3) fixHide，fixShow這是側滑欄的動畫效果。
(4) pageHide，pageShow這是整個頁面的動畫效果
(5) 由于transform隻能出現一次，是以當有兩個即以上的動畫效果時，隻寫在一個transform裡，然後把不同的動畫效果分開就行。
(6) 過渡效果的速度曲線我使用的是ease，如果用linear，在手機上會感覺很卡頓。
3.js
Page({
data:{
isFix:false,//右側清單是否顯示
},
// 右側清單顯示按鈕
pageBtn:function(){
this.setData({
isFix:true
})
},
//右側清單空白點選
fixHide:function(){
this.setData({
isFix: false
})
},
//右側清單防冒泡，必須有，雖然沒内容
fixStopBu: function () {},
//右側清單關閉按鈕
fixClose:function(){
this.setData({
isFix:false
})
},
}) 實作的過程大緻就是這樣。還是挺簡單的。不知道用小程式的動畫api做起來會不會簡單一些或者更順暢一點，這個就看自己勤不勤了。