getClientBoundingRect 用于 Svelte 中带有动画的条件渲染元素

Question

给定带有下拉菜单的条件渲染 div。为了计算它的位置（向上或向下打开），我需要获取它的高度和宽度。

当然，在过渡完成之前元素没有得到正确的尺寸。

所以问题是 - 如何以编程方式关闭转换？或者如何在不显示元素的情况下获得元素的未来位置？

{#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 使用 getComputedStyle，所以也许这就是你需要的。以下内容是从 svelte 存储库 (src/runtime/transition/index.ts) 中的幻灯片函数复制而来的。滑动功能将这些值从零设置为初始值并返回。

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);

编辑： @bobfanger 在 cmets 中解释了如何制作自定义 mySlide-function，并且在该函数中，有可用的初始大小值。这是一个工作示例：

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

这比使用onMount 和visibility hacks 简单得多。