getClientBoundingRect for conditionally rendered element with animation in Svelte - svelte-3

Question

Given conditionally rendered div with drop-down menu. In order to calculate its position (to open it to up or down) I need to get its height and width.
Of course element doesn't get correct dimensions before the transition is done.
So question is - how do I turn off transition programmatically? Or how do I get future position of element without showing it?
{#if isOpened}
<div
bind:this={thisMenu}
use:clickOutside
on:click_outside={closeHandler}
class="dropdown absolute left-100p text-gray-600 z-10 w-full animated
rounded-lg"
style={finalStyle}
{isInit ? null : transition:slide }>
<slot name="list" />
</div>
{/if}

Answer 1

slide-transition uses getComputedStyle, so maybe that’s what you need. The following is copied from slide function in svelte’s repository (src/runtime/transition/index.ts). Slide-function sets those values from zero to initial value and back.
const style = getComputedStyle(node);
const opacity = +style.opacity;
const height = parseFloat(style.height);
const padding_top = parseFloat(style.paddingTop);
const padding_bottom = parseFloat(style.paddingBottom);
const margin_top = parseFloat(style.marginTop);
const margin_bottom = parseFloat(style.marginBottom);
const border_top_width = parseFloat(style.borderTopWidth);
const border_bottom_width = parseFloat(style.borderBottomWidth);
EDIT:
#bobfanger explained in comments how to make a custom mySlide-function and within that function there are those initial size values available. Here is a working example:
<script>
import {slide} from "svelte/transition"
let show=false
let d
function mySlide(el) {
let s=window.getComputedStyle(d)
console.log("mySlide",s.height)
return slide(el, {duration:2000})
}
</script>
<h1 on:click={()=>show=show?false:true}>Click me</h1>
{#if show}
<div bind:this={d} transition:mySlide
style="background-color:yellow;padding:10px;border:10px solid;">
<p>test</p>
</div>
{/if}
This is much simpler than to use onMount and visibility hacks.