0

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

点击后:

图示中部分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也加上一个动画效果呢?求大佬指教

2个回答

0

已采纳

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

0

给父div 高度 不然没有效果

撰写答案

相似问题