微信小程序CSS3動畫下拉菜單效果

<view id="text_box">
 <text decode='true'> 歷 史 記 錄</text>
</view>
<button id="slide" bindtap="toggle">▼</button>
<view id="box" class="{{first_click?'show':'hide'}} {{state?'open':'close'}}">
 <view id="item_list">
 <view>111</view>
 <view>222</view>
 <view>333</view>
 </view>
</view>

#box{
 width: 100%;
 border-top: 1px solid #ddd;
 overflow: hidden;
 height: 0;
 animation-fill-mode: forwards;
}

#item_list{
 background-color: white;
 width: 100%;
}

#item_list view{
 text-align: right;
 overflow: auto;
 white-space: nowrap;
}

@keyframes slidedown{
 from {
 height: 0;
 }
 to {
 height: 240rpx;
 }
}

@keyframes slideup{
 from {
 height: 240rpx;
 }
 to {
 height: 0;
 }
}

.open{
 animation: slidedown 1s;
}

.close{
 animation: slideup 1s; 
}

.hide{
 display: none;
}

.show{
 display: block;
}

data: {
 state:false,
 first_click:false,
 },

 toggle: function(){
 var list_state = this.data.state,
 first_state = this.data.first_click;
 if (!first_state){
 this.setData({
 first_click: true
 });
 }
 if (list_state){
 this.setData({
 state: false
 });
 }else{
 this.setData({
 state: true
 });
 }
 }