使用v-if显示子div时如何避免父元素的高度跳跃答案

【问题标题】：How to avoid parent element's height jumping when displaying a child div with v-if使用v-if显示子div时如何避免父元素的高度跳跃
【发布时间】：2019-07-02 21:31:55
【问题描述】：

我有一个父 div 和一个子 div。子 div 通过 v-if 显示。我可以向子元素添加一个过渡，但是一旦过渡超过父元素的高度就会突然改变并且看起来不太好。

我想要 jQuery 的 slideToggle() 函数。

这是我的 html，我通过转换 opacity 来使用淡入淡出效果：

  <div class="my-div">
    <p>some content</p>
    <transition name="fade" mode="out-in">
      <p key=1 v-if="show">hello</p>
    </transition>
  </div>

这是过渡 css：

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s
}

.fade-enter,
.fade-leave-to {
  opacity: 0
}

.my-div {
  background: lightgreen;
}

这是我的代码：

https://jsfiddle.net/x15Lw6a3/

我不知道如何进行高度转换。根据其他一些问题，我尝试从opacity 切换到height 和max-height，但它只是上下切换。

感谢任何想法或教程链接。谢谢！

【问题讨论】：

不确定你想要什么。是想让父div在孩子消失后保持高度还是想让父div的高度平滑减小？
我需要父母的身高在孩子出现时增加，然后在孩子消失时降低。淡入淡出只是一个例子来展示我到目前为止所理解的。我需要高度变化效果来代替淡入淡出效果。

标签： css vue.js vuejs2 vue-component transition

【解决方案1】：

尝试使用max-height 属性，将max-height: 100px; 添加到fade-enter-active, .fade-leave-active 规则并在.fade-enter, .fade-leave-to 规则中将其设置为0，如下所示：

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
  max-height: 100px;
  opacity: 1;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  max-height: 0px;
}

.my-div {
  background: lightgreen;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <div class="my-div">
  <p>some content</p>
  <transition name="fade" mode="out-in">
    <p key=1 v-if="show" >hello</p>
  </transition>
  </div>
</div>

注意：

你可以看到动画不是很流畅

【讨论】：

当您将过渡持续时间设置为 0.05s 时，口吃并不明显，这对于我的场景来说是可以的。任何想法或进一步阅读材料为什么这不能正常工作？
我读过这个article 可以帮助你

【解决方案2】：

我自己尝试了多种方法，最终选择了一个组件，VueSlideToggle 完美地为我完成了这项工作。它利用了针对height 属性的CSS 过渡。

new Vue({
  el: '#demo',

  data() {
    return {
      show: true
    }
  }
});

.my-div {
  background: lightgreen;
}

<div id="demo">
  <button v-on:click="show = !show">Toggle</button>

  <div class="my-div">
    <p>some content</p>

    <vue-slide-toggle :open="show" tag="div" :duration="500">
      <p v-if="show">hello</p>
    </vue-slide-toggle>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-slide-toggle"></script>

【讨论】：