In diesem Tutorial erfährst du, wie du die automatische Höhenanimation des Inhalts in einer Vue 3-Anwendung mithilfe von GSAP realisieren kannst. Diese Technik ermöglicht flüssige und elegante Animationen, wenn sich die Höhe eines Containers dynamisch ändert, basierend auf seinen Kind-Elementen.
Integriere einen Container mit Verweisen in deinen Vue3-Komponenten.
Hier wird gezeigt, wie du einen Container in deiner Vue3-Komponente erstellen kannst, der Verweise auf zwei Elemente enthält: den äußeren Container selbst und den inneren Inhaltsbereich. Diese Struktur wird verwendet, um die Höhe des Containers basierend auf der Höhe des Inhalts anzupassen.
<template>
<div ref="container">
<div ref="content">
<!-- YOUR CONTENT -->
</div>
</div>
</template>
Füge dieses Skript hinzu, um die Höhe des Inhalts zu animieren.
Dieses Skript zeigt, wie du die Höhe des Containers automatisch an die Höhe des Inhalts anpassen kannst, während sich der Inhalt ändert. Durch die Verwendung von Vue3-Reaktivität und dem ResizeObserver aus "@vueuse/core" wird überwacht, wenn sich die Höhe des Inhalts ändert. Bei einer Änderung wird die Animationsbibliothek GSAP verwendet, um die Höhe des Containers sanft zu animieren und so eine flüssige Anpassung der Höhe zu erreichen.
<script setup>
import { onMounted, ref } from 'vue';
import { gsap } from 'gsap';
import { useResizeObserver } from "@vueuse/core";
const container = ref(null);
const content = ref(null);
onMounted(() => {
// Nutze useResizeObserver, um Änderungen in der Höhe des Child-Elements zu überwachen
useResizeObserver(content, (entries) => {
// Animiere die Höhenänderung des Container-Elements unter Verwendung von GSAP
if (container.value) {
gsap.to(container.value, {
height: entries[0].contentRect.height,
duration: 0.5,
});
}
});
});
</script>