Visibility gone animation fix

7b694769d0be07c89cbdfaa3e9636e4c8bee1265

client/web/divkit/src/components/state/State.svelte

@@ -146,6 +146,7 @@
         parentComponentContext: ComponentContext;
         transitions: AppearanceTransition;
         node: HTMLElement;
+        bbox?: DOMRect;
         resolvePromise?: (val?: void) => void;
     }
     interface ChildWithTransitionChange {
@@ -172,7 +173,7 @@
         transitions = componentContext.getJsonWithVars(transitions) as AppearanceTransition;
 
         const transitionsList: AnyTransition[] = flattenTransition(transitions);
-        const bbox = node.getBoundingClientRect();
+        const startBbox = child.bbox || node.getBoundingClientRect();
         const jsonCopy = {
             ...json,
             margins: undefined,
@@ -184,14 +185,14 @@
             componentContextCopy: parentComponentContext.produceChildContext(jsonCopy, {
                 fake: true
             }),
-            elementBbox: bbox,
+            elementBbox: startBbox,
             rootBbox,
             transitions: transitionsList,
             alpha: json.alpha,
-            width: bbox.width,
-            height: bbox.height,
-            offsetTop: bbox.top - rootBbox.top,
-            offsetLeft: bbox.left - rootBbox.left,
+            width: startBbox.width,
+            height: startBbox.height,
+            offsetTop: startBbox.top - rootBbox.top,
+            offsetLeft: startBbox.left - rootBbox.left,
             direction,
             resolvePromise: child.resolvePromise,
             node: child.node
@@ -378,12 +379,14 @@
         unregisterInstance(id: string) {
             childStateMap?.delete(id);
         },
+        // eslint-disable-next-line max-params
         runVisibilityTransition(
             json: DivBaseData,
             parentComponentContext: ComponentContext,
             transitions: AppearanceTransition,
             node: HTMLElement,
-            direction: 'in' | 'out'
+            direction: 'in' | 'out',
+            bbox: DOMRect | undefined
         ) {
             if (!animationRoot) {
                 return Promise.resolve();
@@ -396,7 +399,8 @@
                     json,
                     parentComponentContext,
                     transitions,
-                    node
+                    node,
+                    bbox
                 },
                 direction
             );

client/web/divkit/src/components/utilities/Outer.svelte

@@ -715,6 +715,11 @@
             hasVisibilityChangeTrigger &&
             transition
         ) {
+            let bbox: DOMRect | undefined;
+            if (nextVisibility === 'gone') {
+                bbox = currentNode.getBoundingClientRect();
+            }
+
             await tick();
 
             if (direction === 'in') {
@@ -728,7 +733,8 @@
                 componentContext,
                 transition,
                 currentNode,
-                direction
+                direction,
+                bbox
             ).then(() => {
                 if (direction === 'in') {
                     visibilityChangingInProgress = false;

client/web/divkit/src/context/state.ts

@@ -43,7 +43,8 @@ export interface StateCtxValue {
         componentContext: ComponentContext,
         transitions: MaybeMissing<AppearanceTransition>,
         node: HTMLElement,
-        direction: 'in' | 'out'
+        direction: 'in' | 'out',
+        bbox?: DOMRect | undefined
     ): Promise<void>;
 
     registerChild(id: string): void;