Tengo una matriz v-for que contiene un montón de elementos. Después de que el usuario realiza ciertas acciones, inserto otro elemento al frente de la matriz.

Quiero que el elemento tenga inicialmente una altura de 0 y que se expanda lentamente hasta una altura de 150 px. Los otros elementos deben permanecer 150px como estaban antes.

Mi intento fallido fue intentar asignar una clase con altura 0 al elemento recién insertado:

 <div id="brickHolder"> <svg v-for="brick in bricks" :id="brick.id" class="expandable" :class="{not_expanded: keepShut(brick.id)}" </svg> </div>

 keepShut(id) { return id === this.bricks[0].id },

Y para luego eliminarlo, activando la animación de expansión:

 let parent = document.getElementById("brickHolder"); parent.children[0].classList.remove('not_expanded');

Pero eso no funciona. ¿Cuál es una mejor manera?