Как получить рост детей составляющего компонента? ⇐ Html

[Anonymous]

Я пытаюсь создать компонент, который приведет детей к детям, когда он попадет в просмотр, вот код: < /p>

Код: Выделить всё

import type { Snippet } from 'svelte';
import { viewport } from '$lib/actions/useViewportAction.svelte';

let { children }: { children: Snippet } = $props();
let animating = $state(false);

function handleEnter() {
console.log('Element entered the viewport');
animating = true;
}

function handleLeave() {
console.log('Element left the viewport');
animating = false;
}


{#if animating}
{@render children()}
{/if}

Внешний div - это тот, который «обнаруживает», когда элемент входит в Viewpor, и когда это происходит, анимирование установлено на True, что делает детей. Это работает, но проблема заключается в том, что до того, как пользователь достигнет тока просмотра, div пуст, поэтому, когда вы прокручиваете к этой точке, вы можете увидеть элемент, выдвигающий и отклоняющий элементы. Я пытался исправить его несколько способов, но я думаю, что лучшее решение - как -то установить высоту эталонного div на высоту детей. Если бы это невозможно, я бы приступил к каким -либо альтернативным решениям.


Подробнее здесь: https://stackoverflow.com/questions/794 ... ren-height