framework7+vue+cordova移動開發（二）實現一個簡單展開收縮動畫

以前做pc開發比較多，現在項目要求要做移動端開發，花了幾天學習framework7，就踏上了征途。
爲啥選擇f7，原因簡單就是前人已經用了，爲了減少團隊學習成本，繼續沿用了，親自體驗了下，f7確實做的不錯，就是資料比較少。

今天要實現個簡單收縮展開的動畫，在官方例子裏面找了一圈沒有找到適合的組件，只能自己做咯。

其實就是點擊圖標，展開裏面內容，再次點擊收起裏面的內容，帶動畫效果。
第一步：爲展示收起區域定義樣式

@aniTimer:.4s;

.menu-body {
    margin-bottom: 18px;
    overflow: hidden;

    transition-property:height;
    transition-duration:@aniTimer;
    /* Firefox 4 */
    -moz-transition-property:height;
    -moz-transition-duration:@aniTimer;
    /* Safari and Chrome */
    -webkit-transition-property:height;
    -webkit-transition-duration:@aniTimer;
    /* Opera */
    -o-transition-property:height;
    -o-transition-duration:@aniTimer;
  }

關鍵代碼自然就是
transition-property:height;
transition-duration:@aniTimer;

第二步：就是點擊圖標執行高度變化的操作：

  //點擊展開 收縮下面的區域
            toggleShowArea($event) {
                let bodyEl=this.$refs.menuBody.$el;
                if(parseFloat(bodyEl.style.height)===0){
                    this.iconSrc="gm goingGroup-";
                    bodyEl.style.height=this.blockHeight+"px";
                }else{
                    this.iconSrc="gm goingGroup-1";
                    bodyEl.style.height="0px";
                }
            },

第三步：按理完成前2步就可以了，但發現第一次點擊效果不佳，就加了下面這個方法：

//加載完後 設置下高度，用於動畫顯示
            this.$nextTick(()=>{
                this.blockHeight=parseFloat(this.$refs.menuBody.$el.offsetHeight);
                this.$refs.menuBody.$el.style.height=this.blockHeight+"px";
            })

到此就完美但實現了一個展開收縮動畫效果咯。