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";
            })

到此就完美但实现了一个展开收缩动画效果咯。