framework7+vue+cordova移动开发（二）实现一个简单展开收缩动画

女爷i 2023-02-20 04:46 25阅读 0赞

以前做pc开发比较多，现在项目要求要做移动端开发，花了几天学习framework7，就踏上了征途。  
为啥选择f7，原因简单就是前人已经用了，为了减少团队学习成本，继续沿用了，亲自体验了下，f7确实做的不错，就是资料比较少。

今天要实现个简单收缩展开的动画，在官方例子里面找了一圈没有找到适合的组件，只能自己做咯。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]  
其实就是点击图标，展开里面内容，再次点击收起里面的内容，带动画效果。  
第一步：为展示收起区域定义样式

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200623105845555.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM=,size_16,color_FFFFFF,t_70