Fixed grow animation not working on nodes disappearing

src/components/board/Board.vue

@@ -20,9 +20,9 @@
                         <BoardLink :link="link" />
                     </g>
                 </transition-group>
+                <transition-group name="grow" :duration="500" appear>
+                    <g v-for="node in nodes" :key="node.id" style="transition-duration: 0s">
                         <BoardNode
-                    v-for="node in nodes"
-                    :key="node.id"
                             :node="node"
                             :nodeType="board.types[node.type]"
                             :dragging="draggingNode"
@@ -33,6 +33,8 @@
                             @endDragging="endDragging"
                         />
                     </g>
+                </transition-group>
+            </g>
         </svg>
     </panZoom>
 </template>

src/components/board/BoardNode.vue

@@ -44,8 +44,8 @@
             </g>
         </transition>
 
-        <transition name="grow" appear>
         <g
+            class="node-container"
             @mouseenter="mouseEnter"
             @mouseleave="mouseLeave"
             @mousedown="mouseDown"
@@ -134,7 +134,6 @@
 
             <text :fill="titleColor" class="node-title">{{ title }}</text>
         </g>
-        </transition>
 
         <transition name="fade" appear>
             <text
@@ -386,11 +385,6 @@ export default defineComponent({
         opacity: 0.25;
     }
 }
-
-.grow-enter-from,
-.fade-leave-to {
-    transform: scale(0);
-}
 </style>
 
 <style>
@@ -398,4 +392,9 @@ export default defineComponent({
 .actions-leave-to .action {
     transform: translate(0, 0);
 }
+
+.grow-enter-from .node-container,
+.grow-leave-to .node-container {
+    transform: scale(0);
+}
 </style>