我有一个父母div和一个孩子div.子div通过v-if显示.我可以向子元素添加一个过渡,但是一旦过渡超过了父元素的高度,它的外观就会突然变化.
我想要类似jQuery的slideToggle()函数的东西.
这是我在html中通过过渡不透明度使用淡入淡出效果的位置：
<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/
我不知道如何进行高度转换.我尝试按照其他一些问题从不透明度切换到高度,然后再切换到最大高度,但是它只是上下波动.
任何想法或教程的链接表示赞赏.谢谢！
最佳答案
尝试通过添加max-height来使用max-height属性：100px;淡入活跃,
.fade-leave-active规则,在.fade-enter中,
.fade-leave-to规则将其设置为0,如下所示：
.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>注意：
您会看到动画不是很流畅
