michaelschiemer/docs/features/view-transitions.md

View Transitions API

View Transitions API für nahtlose Übergänge zwischen Seiten und Zuständen.

Baseline Status

Baseline 2023: View Transitions API ist Baseline Newly available.

Übersicht

Die View Transitions API ermöglicht nahtlose Übergänge zwischen verschiedenen Seitenzuständen ohne zusätzliche JavaScript-Bibliotheken.

Verwendung

Automatische Navigation Transitions

Die View Transitions API wird automatisch für Navigation verwendet:

@view-transition {
    navigation: auto;
}

Manuelle View Transitions

import { transitionNavigation, transitionContentUpdate } from './modules/admin/view-transitions.js';

// Navigation Transition
transitionNavigation(() => {
    window.location.href = '/new-page';
});

// Content Update Transition
transitionContentUpdate(() => {
    document.getElementById('content').innerHTML = newContent;
});

Benannte Bereiche

Admin-Bereiche

Die folgenden Bereiche haben benannte View Transitions:

• admin-sidebar - Sidebar-Navigation
• admin-content - Hauptinhalt
• admin-header - Header-Bereich
• admin-popover - Popover-Elemente

CSS-Definition

.admin-sidebar {
    view-transition-name: admin-sidebar;
}

.admin-content {
    view-transition-name: admin-content;
}

.admin-header {
    view-transition-name: admin-header;
}

[popover].admin-popover {
    view-transition-name: admin-popover;
}

JavaScript Helper

Verfügbare Funktionen

supportsViewTransitions()

Prüft, ob View Transitions unterstützt werden:

import { supportsViewTransitions } from './modules/admin/view-transitions.js';

if (supportsViewTransitions()) {
    // View Transitions verfügbar
}

transitionNavigation(callback)

Startet eine View Transition für Navigation:

import { transitionNavigation } from './modules/admin/view-transitions.js';

transitionNavigation(() => {
    window.location.href = '/new-page';
});

transitionContentUpdate(callback)

Startet eine View Transition für Content-Updates:

import { transitionContentUpdate } from './modules/admin/view-transitions.js';

transitionContentUpdate(() => {
    document.getElementById('content').innerHTML = newContent;
});

transitionPopover(popoverElement, callback)

Startet eine View Transition für Popover:

import { transitionPopover } from './modules/admin/view-transitions.js';

const popover = document.getElementById('my-popover');
transitionPopover(popover, () => {
    popover.showPopover();
});

initViewTransitions()

Initialisiert alle View Transitions automatisch:

import { initViewTransitions } from './modules/admin/view-transitions.js';

initViewTransitions();

CSS-Animationen

Standard-Animationen

::view-transition-old(admin-sidebar),
::view-transition-new(admin-sidebar) {
    animation: fade 0.15s ease-out;
}

::view-transition-old(admin-content),
::view-transition-new(admin-content) {
    animation: fade 0.15s ease-out;
}

::view-transition-old(admin-header),
::view-transition-new(admin-header) {
    animation: slide-down 0.2s ease-out;
}

Custom Animationen

::view-transition-old(custom-area),
::view-transition-new(custom-area) {
    animation: custom-animation 0.3s ease-in-out;
}

@keyframes custom-animation {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

Best Practices

1. Benannte Bereiche verwenden

Verwende view-transition-name für präzise Animationen:

.important-content {
    view-transition-name: important-content;
}

2. Performance beachten

View Transitions sollten schnell sein (0.15s - 0.3s):

::view-transition-old(content),
::view-transition-new(content) {
    animation-duration: 0.15s;
}

3. Accessibility respektieren

Respektiere prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none;
    }
}

4. Fallback für nicht unterstützende Browser

if (supportsViewTransitions()) {
    transitionNavigation(() => {
        // Navigation
    });
} else {
    // Fallback ohne Transition
    window.location.href = '/new-page';
}

Admin-spezifische Patterns

Navigation Links

Navigation Links verwenden automatisch View Transitions:

<a href="/admin/users" class="admin-nav__link">Users</a>

Content Updates

Content-Updates können mit View Transitions animiert werden:

transitionContentUpdate(() => {
    document.querySelector('.admin-content').innerHTML = newContent;
});

Popover Transitions

Popover verwenden automatisch View Transitions beim Öffnen/Schließen.

Browser-Support

• Chrome 111+
• Firefox 129+
• Safari 18+
• Edge 111+

Migration

Von Custom Transitions migrieren

Vorher:

// Custom Transition
element.style.transition = 'opacity 0.3s';
element.style.opacity = '0';
setTimeout(() => {
    updateContent();
    element.style.opacity = '1';
}, 300);

Nachher:

// View Transitions API
transitionContentUpdate(() => {
    updateContent();
});

Weitere Ressourcen

• MDN: View Transitions API
• web.dev: View Transitions