動畫觸發(fā)的時候，父div被撐開的問題

下面是我點擊前后顯示的頁面：
點擊前：

點擊后：

圖示中部分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也加上一個動畫效果呢？求大佬指教