时间戳

首页 > 解决方案 > 使用v-if显示子div时如何避免父元素的高度跳跃

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

问题描述

我有一个父 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但它只是上下切换。

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

标签： cssvue.jsvuejs2vue-componenttransition

解决方案

尝试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>

笔记：

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

推荐阅读