如何在 svelte 销毁之前获取 HTMLElement 属性？

Question

有一个简单的演示：

https://stackblitz.com/edit/sveltejs-kit-template-default-qns8y9?file=src%2Fcomponents%2FCard.svelte

在

Card.svelte

，第29 - 37行，在路由（销毁）之前，可写

crossPageState

应该记住这张卡的位置，但它只记住

{left: 0, top: 0, width: 0, height: 0}

。

我尝试使用操作并记住返回的

destroy

函数中的位置，但它仍然记得

{left: 0, top: 0, width: 0, height: 0}

Answer 1

我相信

onDestroy

会在组件被销毁后运行，因此该元素不再在屏幕上。您可以通过在 onMount

 期间存储 div 的位置来解决此问题。

export let key: string;
let wrapDiv: HTMLDivElement;
let currentPos: ElementState;

onMount(() => { 
  currentPos = getRect(wrapDiv);
  
  const v = $crossPageState;
  if (key in v) {
    const prevPos = v[key];
    const invert = {
      left: prevPos.left - currentPos.left,
      top: prevPos.top - currentPos.top
    };
    const keyframes = [
      { transform: `translate(${invert.left}px, ${invert.top}px)` },
      { transform: `translate(0)` }
    ];
    const options = { duration: 300, easing: "cubic-bezier(0,0,0.32,1)" };
      
    wrapDiv.animate(keyframes, options);
          
  }
});

onDestroy(() => {
  $crossPageState[key] = currentPos
});

重要变化：

在
• onMount

  期间直接存储元素位置（在设置动画之前）

使用
• onDestroy中存储的值

较少的导入更改：

不鼓励使用
• get

  ，请改用商店订阅

不同的方法：

您正在一个页面上的位置与另一页面上的位置之间对元素进行动画处理。考虑使用

View Transition API 来代替（它是为此而设计的），而截至目前，Safari 或 Firefox 尚未完全支持它，并且卡片将在这两个浏览器中简单地“跳转”，请考虑动画的重要性本身就是（它会破坏功能还是只是装饰？）并且这可能会“很快”在这两个浏览器中得到支持。