Wie bekomme ich die Kinderhöhe der Kinder in der Kinderkomponente?HTML

HTML-Programmierer
Anonymous
 Wie bekomme ich die Kinderhöhe der Kinder in der Kinderkomponente?

Post by Anonymous »

Ich versuche, eine Komponente zu erstellen, die ihre Kinder in der Ansichtsfenster rendert.

Code: Select all

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}

Der äußere Div ist derjenige, der "erkennt", wenn das Element in die Sichtspeicher eingeht, und wenn dies animiert wird, wird auf wahr gesetzt, was die Kinder macht. Dies funktioniert jedoch, aber das Problem ist, dass vor dem Erreichen des Nutzers das Ansichtsfenster das Div leer ist. Wenn Sie also zu diesem Punkt scrollen, können Sie das Element aparieren und die Elemente verstreuen.
Ich habe es versucht, es auf verschiedene Arten zu beheben, aber ich denke, die beste Lösung wäre, die Höhe des Referenzdivs irgendwie auf die Höhe der Kinder zu setzen. Wenn dies nicht möglich ist, würde ich alternative Lösungen schätzen.

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post