动画触发的时候，父div被撑开的问题

Question

下面是我点击前后显示的页面：
点击前：

点击后：

图示中部分html的代码：

      <div class="question-add">
        <transition-group name="list">
          <div class="question-add-type" v-if="showList" :key="1">
            <ButtonGroup>
              <Button size="large" @click="addSingle"><Icon type="android-radio-button-on"></Icon>&nbsp;单选</Button>
              <Button size="large" @click="addMultiple"><Icon type="ios-checkmark"></Icon>&nbsp;多选</Button>
              <Button size="large" @click="addText"><Icon type="document-text"></Icon>&nbsp;文本题</Button>
            </ButtonGroup>
          </div>
        </transition-group>
        <div class="question-add-operation">
          <ButtonGroup>
            <Button size="large" @click="addQuestion"><Icon type="plus"></Icon>添加问题</Button>
          </ButtonGroup>
        </div>
      </div>

css部分代码：

  .list-enter-active,
  .list-leave-active {
    transition: all 1s;
  }
  .list-enter,
  .list-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }

我的问题： 点击按钮可以使三个选项做一个浮上来的动画，但是随之而来的，它的父div高度也会被撑开，整个动画很生硬。那么如何给这个父div也加上一个动画效果呢？求大佬指教

Answer 1

把ButtonGroup设为的绝对定位absolute就可以很好的解决父级高度被撑开的问题了。不知道能不能解决你的问题？
或者一开始先把父级的高度固定并设置transition属性，ButtonGroup出现的时候，给父级也动态设置一个高度，因为父级设置了transition属性，也会有一个高度变化的特效。

Answer 2

给父div 高度 不然没有效果