Я пытаюсь создать компонент, который приведет детей к детям, когда он попадет в просмотр, вот код: < /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