Akansel Cengiz Logo Akansel Cengiz

A frustrated Lego guy sits in front of a desk.

Verfasst von Akansel Cengiz

Veröffentlicht am 22.12.2023

05 | Astro - View Transitions

Warum ich mich gegen View Transitions entschieden habe.


3 Minuten Lesezeit

Vorwort

Nachdem ich die meisten Funktionen auf meiner Seite implementiert habe und diese auch einwandfrei funktionieren (zumindest glaube und hoffe ich das 😂) bin ich an dem Punkt angekommen mich voll und ganz auf das Thema „Transitions“ einzulassen. Transitions sind echt eine super Sache. Die Übergänge zwischen den Pages wirken dadurch viel flüssiger und cooler. Ohne Transitions wirkt alles so abgebrochen und dumpf.

swup logo

Warum wolltest du nicht mit SWUP weiter arbeiten?

Auf dieser Seite benutze ich zwar SWUP ↗️, aber der Gedanke war es alles über Astro laufen zu lassen, um eventuellen Performance Problemen entgegenzuwirken. Also habe ich alles, was mit SWUP Transitions zu tun hat, auskommentiert und offline gesetzt. Gleichzeitig habe ich mich strikt an die View Transition Documentation ↗️ gehalten, um einen reibungslosen Ablauf zu gewährleisten.

Testweise habe ich dem Header eine SLIDE Funktion verpasst und der h1 eine FADE Transition spendiert. So, getestet und View Transitions funktioniert wunderbar. Jetzt funktioniert aber auf einmal der ToggleSwitch für das Dark und Light Theme nicht mehr. Wenn ich die Seite immer neu lade, klappt der ToggleSwitch, aber wenn ich die Seite wechsele funktioniert der Schalter nicht mehr. Also auf zur nächsten Baustelle.

Alles wieder auskommentieren und schauen, ob es ohne View Transitions funktioniert. Yes, es klappt ohne Probleme. View Transitions aktiviert. No, klappt nicht. Jetzt wieder SWUP aktivieren und schauen ob der ToggleSwitch hier auch nicht klappt, was mir vielleicht bei SWUP nicht aufgefallen ist, das der ToggleSwitch nicht funktioniert. Page Transitions funktioniert. Schon mal ein gutes Zeichen. Jetzt noch den ToggleSwitch testen. Funktioniert auch wieder ohne Probleme.

Wo hast du versucht Hilfe für dein Problem finden?

Ich habe mich auf dem Astro Discord Server ↗️ angemeldet, um mein Problem mit der Community zu teilen. Es gab zwar einige Responses aber eine richtige Lösung war leider nicht dabei. Danach ging es mit der Google Suche und StackOverflow ↗️ weiter. Auch hier leider zufriedenstellende Lösung. Zum Astro Discord Server kann ich nur sagen, dass er, wie ich finde, sehr riesig ist und man bekommt auch sehr, sehr viel Input über Astro vermittelt.

Warum hast du nicht weiter versucht View Transitions einzubinden?

Nach ungefähr 1 1/2 Wochen habe ich aufgehört mich damit zu beschäftigen, warum der ToggleSwitch nicht bei View Transitions, aber bei SWUP funktioniert. Die Zeit rast halt verdammt schnell an einem vorbei so das es aus 1 1/2 schnell mal 3–4 Wochen oder mehr werden können. Definitiv zu lange für mich. Das ist auch der Grund, warum ich mich gegen View Transitions und für SWUP entschieden habe.

Mein Fazit

Noch ein Wort über SWUP. Es ist ein sehr schönes und leicht zu implementierendes Tool. Ich werde es auch weiterhin in anderen Projekten benutzen. Ist auf jeden Fall eine Empfehlung wert.


Tags:

Astro

TailwindCSS

Frontend

Blog

Bootstrap

Google Lighthouse

React

HTML

CSS

JavaScript

AWS

Cloud

CloudFront

ACM

Route 53

Fonts

Fontsource

API

HTTP-Clients

JSON

RandomUser

Testimonial

Markdown

MDX

Markdoc

Blogging

Transitions

Swup

Astro Discord Server

Github

Version Control

Repository

StackOverflow

Test Automation Framework

Testing-Framework

Cypress

Sitemap

SEO