CSS使用过渡动画实现展开折叠效果

前端页面展开/折叠效果可通过v-show控制显示隐藏，但这样页面交互太刻意了，显得不是很顺畅，为了提高用户使用体验感可以使用过渡动画实现平缓地展开折叠效果~

一、页面结构

大致如下，页面成左右结构，通过箭头控制收缩

 二、html代码

isFold 为变量， 初始化值 false

<template>
  <div class="tool-param-wrap">
    <!-- 向右的箭头 展开 -->
    <div v-if="isFold" class="r-arrow" @click="handleTrigger">
      <i class="el-icon-arrow-right"></i> 
    </div>
    <div :class="['group-wrap', isFold ? 'is-fold' : 'not-fold']">
        <!-- 向左的箭头 折叠 -->
        <div class="fold-icon" @click="handleTrigger">
          <i class="el-icon-arrow-left"></i>
        </div>
    </div>
    <div :class="['group-p-box', isFold ? 'g-not-fold' : 'g-is-fold']"></div>
  </div>
</template>

三、css样式

  .tool-param-wrap {
    display: flex;
    position: relative;
    width: 100%;
    height: calc(100vh - 78px);

    .r-arrow {
      cursor: pointer;
      position: absolute;
      width: 14px;
      height: 14px;
      left: 15px;
      top: 28px;
    }

    .is-fold {
      transition: all 0.2s;
      width: 0px;
    }

    .not-fold {
      width: 200px;
      border: 1px solid #f2f3f8;
    }

    .group-p-box {
      height: calc(100vh - 110px);
      overflow-y: auto;
    }

    .g-not-fold {
      width: 100%;
    }

    .g-is-fold {
      width: calc(100% - 200px);
      transition: all 0.2s;
    }
  }

重点：transition: all 0.2s;

1、CSS过渡允许您在给定的时间内平滑地改变属性值

2、过渡效果两个明确事件：

1）添加效果的CSS属性   

2）效果持续时间

注意：如果未规定持续时间部分，则过渡不会有效果，默认值为0

3、CSS过渡属性

transition: all 0.2s;      是简写等价于   transition: 过渡属性  过渡效果延迟；

CSS 过渡https://www.w3school.com.cn/css/css3_transitions.asp

四、折叠展开事件处理函数

handleTrigger() {
    this.isFold = !this.isFold;
}

五、效果展示

 

 以上就可以实现平滑展开折叠啦，快去试试吧

这世界很喧嚣，做你自己就好