I have a v-for array that holds a bunch of elements. After the user performing certain actions, I insert another element at the front of the array.

I want the element to initially have a height of 0, and to slowly expand to a height of 150px. The other elements should remain 150px like they were before.

My failed attempt was to try to assign a class with height 0 to the the newly inserted element:

    <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
    },

And to then remove it, triggering the expansion animation:

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

But that doesn't work. What's a better way?