css - v-if显示子div时如何避免父元素跳高

Question

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

我想要类似 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;
}

这是我的代码的 fiddle :

https://jsfiddle.net/x15Lw6a3/

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

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

Answer 1

通过将 max-height: 100px; 添加到 fade-enter-active，尝试使用 max-height 属性，.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>

注意:

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