我正在尝试制作两个在相反的v-show谓词上交替的元素，以便在高度方面进行转换，但我无法为此找到一个好的解决方案。 这可能有点基本，但我对过渡/动画缺乏经验，我找不到任何好的例子来指导我。
HTML：
<div id="app">
<div class="history">
<p>
How to make the green bordered area transition smoothly between different height in states A and B?
</p>
<div class="placeholder-content">
</div>
</div>
<div class="interaction">
<button @click="(show_A ? show_A = false : show_A = true);">
Cycle states
</button>
<transition name="swap">
<div v-show="show_A" class="interaction-A"> A </div>
</transition>
<transition name="swap">
<div v-show="!show_A" class="interaction-B"> B </div>
</transition>
</div>
</div>
CSS：
.swap-enter{
}
.swap-leave-to{
}
.swap-enter-active{
}
.swap-leave-active{
}
.swap-move{
}
我用小提琴制定了这个问题：
答案 0 :(得分：1)
您的代码中存在一些严重错误。
首先，您需要使用一个过渡元素，而不是两个，因为您希望过渡元素发生 IN ，而不是 ACROSS 多个过渡元素，即使它涉及它们。
HTML：
@app.route('/', methods=['GET','POST'])
def index():
if request.method == 'POST': #If there is an input from form
CurtainOpenTime = request.form['CurtainOpenTime'] #Assign CurtainOpenTime variable in python to the html CurtainOpenTime variable.
CurtainCloseTime = request.form['CurtainCloseTime'] #Assign CurtainCloseTime variable in python to the html CurtainCloseTime variable.
return render_template('Index.html', CCT=CurtainCloseTime)
其次，您需要将<div class="interaction" v-bind:class="{ show_B: !show_A }">
<button @click="(show_A ? show_A = false : show_A = true);">
Cycle states
</button>
<transition name="fade">
<div v-if="show_A" class="interaction-A" key="a"> A </div>
<div v-else class="interaction-B" key="b"> B </div>
</transition>
</div>
属性应用于要使用唯一键转换的每个元素，以便Vue识别它们是不同的。
我已清理您的代码并使用key和v-if来确保元素被拆除。
最后，使用淡入淡出过渡为您提供了一个很好的平滑变化，可以解释高度差异。
CSS：
v-else为了在转换内部元素时平滑过渡外部容器，在切换内容时应用类.interaction {
border: 10px solid lightgreen;
display: flex;
flex: 1 0 auto;
max-height: 225px;
transition: max-height 0.25s ease-out;
}
.interaction.show_B {
max-height: 325px;
transition: max-height 0.15s ease-in;
}
.fade-enter-active, .fade-leave-active {
transition-property: opacity;
transition-duration: .10s;
}
.fade-enter-active {
transition-delay: .25s;
}
.fade-enter, .fade-leave-active {
opacity: 0;
}
以区分show_B和A子内容。
B我们可以使用它来应用转换和新的最大尺寸，在子内容调整大小时调整外部内容的大小：
<div class="interaction" v-bind:class="{ show_B: !show_A }">
你可以看到工作小提琴here。