如何在显示 child div 和 v-if 时避免 parent 元素的高度跳跃

Question

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

我想要类似于 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，但它只是突然上下。

任何想法或 link 教程都将受到赞赏。谢谢！

Answer 1

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

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>

注：

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

Answer 2

我自己尝试了多种方法，最终选择了一个组件，VueSlideToggle 对我来说非常完美。它利用 CSS 过渡目标 height 属性.

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>

如何在显示 child div 和 v-if 时避免 parent 元素的高度跳跃

How to avoid parent element's height jumping when displaying a child div with v-if

css

transition

vue.js

vue-component

vuejs2