Animieren Sie die Höhe auf v-if in Vuejs mithilfe von Transition ⇐ CSS

[Anonymous]

Ich verwende den folgenden Code, um das V-IF-Element zu animieren, indem ich die Höhe von auf 0 Pixel reduziere. Die Animation funktioniert gut. Das Problem ist jedoch, dass ich die Anfangshöhe des Elements per CSS angeben muss. Für ein Element ist das in Ordnung, aber ich möchte diese Animation auf mehrere Elemente anwenden. Wie kann ich das beheben? Damit die Animation unabhängig von der Höhe gut funktioniert!

Code: Select all

something over here where the height is not constant



.fadeHeight-enter-active,
.fadeHeight-leave-active {
transition: all 0.2s;
height: 230px;
}
.fadeHeight-enter,
.fadeHeight-leave-to
{
opacity: 0;
height: 0px;
}