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

Question

我有一个父 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/

我不知道如何进行高度过渡。我试过根据其他一些问题从opacitytoheight和 to切换，max-height但它只是上下颠簸。

任何想法或教程链接表示赞赏。谢谢！

Answer 1

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

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>

笔记：

你可以看到动画并不完全流畅