el-collapse-transition抖动、卡顿问题解决

使用Vue2结合el-collapse-transition,期望实现一个点击按钮动态展开搜索框的功能，但是在点击时的动画效果卡顿，非常影响观感。

queryParams：保存所有的查询参数，是一个对象

handleQuery：每次点击相应的查询框会触发查询方法

点击展开折叠时由advanced来控制展开折叠

出现问题的源代码

<div class="search_box">
<el-form
    ref="queryForm"
    :inline="true"
    :model="queryParams"
    label-position="right"
    label-width="85px"
    size="small"
>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-form-item label="型号xxx" prop="no">
        <el-input
            v-model="queryParams.no"
            clearable
            placeholder="请输入"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="全称xxx" prop="name">
        <el-input
            v-model="queryParams.name"
            clearable
            placeholder="请输入"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
    </el-col>
    <el-collapse-transition>
      <div v-show="advanced">
        <el-col :span="8">
          <el-form-item label="简称" prop="sName">
            <el-input
                v-model="queryParams.sName"
                clearable
                placeholder="请输入"
                @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
      </div>
    </el-collapse-transition>
    <div class="search_select">
      <el-button size="medium" @click="resetQuery"
      >重置
      </el-button>
      <el-button
          size="medium"
          type="primary"
          @click="handleQuery"
      >查询
      </el-button>
      <a style="margin-left: 8px;font-size: 14px;color: #409EFF;" @click="changeAdvanced">
        {{ advanced ? '收起' : '展开' }}
        <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"/>
      </a>
    </div>
  </el-row>
</el-form>
</div>

问题出现在

<el-collapse-transition>
   <div v-show="advanced">

找了很多帖子说的需要在el-collapse-transition下的v-show控制显示隐藏的下方加上div，如

<el-collapse-transition>
   <div v-show="advanced">
      <div>

但是无效，还是会出现抖动、卡顿的现象，包括说加样式、加动画等等，试了几次最后发现在el-collapse-transition内再加上一个div可以有效解决抖动、卡顿问题，成功代码如下

HTML：

<div class="search_box">
<el-form
    ref="queryForm"
    :inline="true"
    :model="queryParams"
    label-position="right"
    label-width="85px"
    size="small"
>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-form-item label="型号xxx" prop="no">
        <el-input
            v-model="queryParams.no"
            clearable
            placeholder="请输入"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="全称xxx" prop="name">
        <el-input
            v-model="queryParams.name"
            clearable
            placeholder="请输入"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
    </el-col>
    <el-collapse-transition>
      <div>
        <div v-show="advanced">
          <el-col :span="8">
            <el-form-item label="简称" prop="sName">
              <el-input
                  v-model="queryParams.sName"
                  clearable
                  placeholder="请输入"
                  @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-col>
        </div>
      </div>
    </el-collapse-transition>
    <div class="search_select">
      <el-button size="medium" @click="resetQuery"
      >重置
      </el-button>
      <el-button
          size="medium"
          type="primary"
          @click="handleQuery"
      >查询
      </el-button>
      <a style="margin-left: 8px;font-size: 14px;color: #409EFF;" @click="changeAdvanced">
        {{ advanced ? '收起' : '展开' }}
        <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"/>
      </a>
    </div>
  </el-row>
</el-form>
</div>

CSS样式（个人认为该部分影响不大）

<style scoped>

.search_box {
    padding: 8px 0;
    background-color: #FFFFFF;
    border-radius: 6px;

    .search_select {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      float: right;
      padding-right: 10px;
      margin: 8px 0;
    }
  }

</style>
<style>

.search_box {
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      float: right;
    }

    .el-row {
      margin: 0 !important;
    }


    .el-form {
    }

    .el-form-item {
      margin: 8px 0 !important;
      width: 90%;
    }


    .el-form-item__content {
      width: 68%;

    }

    .el-select {
      width: 100%;
    }

    .el-input {
      width: 100%;
    }

    .el-input--small .el-input__inner {
      height: 36px;
    }

    .el-icon-arrow-down {
      font-size: 16px;
    }

    .el-icon-arrow-up {
      font-size: 16px;
    }

  }

</style>