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

任何想法或指向教程的链接都将受到赞赏.谢谢！解决方案通过在 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时如何避免父元素的高度跳变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！