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:

```css
@view-transition {
    navigation: auto;
}
```

### Manuelle View Transitions

```javascript
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

```css
.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:

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

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

#### `transitionNavigation(callback)`

Startet eine View Transition für Navigation:

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

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

#### `transitionContentUpdate(callback)`

Startet eine View Transition für Content-Updates:

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

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

#### `transitionPopover(popoverElement, callback)`

Startet eine View Transition für Popover:

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

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

#### `initViewTransitions()`

Initialisiert alle View Transitions automatisch:

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

initViewTransitions();
```

## CSS-Animationen

### Standard-Animationen

```css
::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

```css
::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:

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

### 2. Performance beachten

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

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

### 3. Accessibility respektieren

Respektiere `prefers-reduced-motion`:

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

### 4. Fallback für nicht unterstützende Browser

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

## Admin-spezifische Patterns

### Navigation Links

Navigation Links verwenden automatisch View Transitions:

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

### Content Updates

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

```javascript
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:**
```javascript
// Custom Transition
element.style.transition = 'opacity 0.3s';
element.style.opacity = '0';
setTimeout(() => {
    updateContent();
    element.style.opacity = '1';
}, 300);
```

**Nachher:**
```javascript
// View Transitions API
transitionContentUpdate(() => {
    updateContent();
});
```

## Weitere Ressourcen

- [MDN: View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
- [web.dev: View Transitions](https://web.dev/view-transitions/)