使用v-if显示子div时如何避免父元素的高度跳变 [英] How to avoid parent element's height jumping when displaying a child div with v-if

问题描述

我有一个父div和一个子div.子div通过v-if显示.我可以向子元素添加一个过渡，但是一旦过渡超过了父元素的高度，它的外观就会突然改变.

我想要类似jQuery的slideToggle()函数.

这是我的html，通过过渡 opacity

使用淡入淡出效果:

 < div class ="my-div">< p>某些内容</p>< transition name =淡入淡出" mode ="out-in">< p key = 1 v-if ="show"> hello</p></transition></div> 

这是过渡CSS:

  .fade-enter-active，.fade-leave-active {过渡:不透明度.5s}.fade-enter，.fade-leave-to {不透明度:0}.my-div {背景:浅绿色；} 

这是我的代码的小提琴:

https://jsfiddle.net/x15Lw6a3/

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

任何想法或指向教程的链接都将受到赞赏.谢谢！

解决方案

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

  Vue.config.devtools = false;Vue.config.productionTip = false;新Vue({el:'#demo'，数据: {显示:真实}}) 

  .fade-enter-active，.fade-leave-active {过渡:所有0.5s缓解；max-height:100像素；不透明度:1；}.fade-enter，.fade-leave-to {不透明度:0；max-height:0px;}.my-div {背景:浅绿色；}  

 < script src ="https://unpkg.com/vue/dist/vue.js"></script>< div id ="demo"><按钮v-on:click ="show =！show">切换</button>< div class ="my-div">< p>某些内容</p>< transition name =淡入淡出" mode ="out-in">< p key = 1 v-if ="show"> hello</p></transition></div></div>  

注意:

您可能会看到动画并不十分流畅

I have a parent div and a child div. Child div is displayed via v-if. I can add a transition to the child element but once the transition is over the parent's height changes abruptly and it doesn't look nice.

I'd like something like the jQuery's slideToggle() function.

Here's my html where I'm using fade effect by transitioning the 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>

and here's the transition css:

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

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

.my-div {
  background: lightgreen;
}

Here is the fiddle with my code:

https://jsfiddle.net/x15Lw6a3/

I don't know how to make the height transition. I've tried switching from opacity to height and to max-height as per some other questions but it just snaps up and down.

Any idea or a link to tutorial is appreciated. Thanks!

解决方案

Try using max-height property by adding max-height: 100px; to fade-enter-active, .fade-leave-active rule and in .fade-enter, .fade-leave-to rule set it 0 as follows:

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>

Note:

You could see that the animation is not perfectly smooth

这篇关于使用v-if显示子div时如何避免父元素的高度跳变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！