Route Geçiş Animasyonları

Rota geçiş animasyonları, Angular uygulamanızda farklı görünümler arasında navigasyon yaparken yumuşak görsel geçişler sağlayarak kullanıcı deneyimini geliştirir. Angular Router, desteklenen tarayıcılarda rota değişiklikleri arasında sorunsuz animasyonlar sağlayan tarayıcının View Transitions API'si için yerleşik destek içerir.

HELPFUL: Yönlendiricinin yerel View Transitions entegrasyonu şu anda geliştirici önizlemesindedir. Yerel View Transitions, tüm tarayıcılarda sınırlı desteğe sahip nispeten yeni bir tarayıcı özelliğidir.

View Transitions nasıl çalışır

View transitions, uygulamanızın farklı durumları arasında yumuşak animasyonlar oluşturmak için tarayıcının yerel document.startViewTransition API'sini kullanır. API şu şekilde çalışır:

Geçerli durumu yakalama - Tarayıcı mevcut sayfanın bir ekran görüntüsünü alır
DOM güncellemesini yürütme - Callback fonksiyonunuz DOM'u güncellemek için çalışır
Yeni durumu yakalama - Tarayıcı güncellenmiş sayfa durumunu yakalar
Geçişi oynatma - Tarayıcı eski ve yeni durumlar arasında animasyon yapar

İşte startViewTransition API'sinin temel yapısı:

document.startViewTransition(async () => {
  await updateTheDOMSomehow();
});

Tarayıcı API'si hakkında daha fazla bilgi için Chrome Açıklayıcısına bakın.

Router view transitions'ı nasıl kullanır

Angular Router, sorunsuz rota değişiklikleri oluşturmak için view transitions'ı navigasyon yaşam döngüsüne entegre eder. Navigasyon sırasında Yönlendirici:

Navigasyon hazırlığını tamamlar - Rota eşleştirme, tembel yükleme, koruyucular ve çözücüler çalışır
View transition'ı başlatır - Rotalar etkinleştirmeye hazır olduğunda Yönlendirici startViewTransition çağırır
DOM'u günceller - Yönlendirici, geçiş callback'i içinde yeni rotaları etkinleştirir ve eskileri devre dışı bırakır
Geçişi sonlandırır - Angular render'ı tamamladığında geçiş Promise'i çözümlenir

Yönlendiricinin view transition entegrasyonu, aşamalı geliştirme olarak işlev görür. Tarayıcılar View Transitions API'sini desteklemediğinde, Yönlendirici animasyon olmadan normal DOM güncellemelerini gerçekleştirir ve uygulamanızın tüm tarayıcılarda çalışmasını sağlar.

Router'da View Transitions'ı etkinleştirme

Yönlendirici yapılandırmanıza withViewTransitions özelliğini ekleyerek view transitions'ı etkinleştirin. Angular hem standalone hem de NgModule başlatma yaklaşımlarını destekler:

Standalone başlatma

import {bootstrapApplication} from '@angular/platform-browser';
import {provideRouter, withViewTransitions} from '@angular/router';
import {routes} from './app.routes';

bootstrapApplication(MyApp, {
  providers: [provideRouter(routes, withViewTransitions())],
});

NgModule başlatma

import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableViewTransitions: true})],
})
export class AppRouting {}

StackBlitz'de "count" örneğini deneyin

Bu örnek, yönlendirici navigasyonunun sayaç güncellemeleri için doğrudan startViewTransition çağrılarını nasıl değiştirebileceğini gösterir.

CSS ile geçişleri özelleştirme

Benzersiz animasyon efektleri oluşturmak için CSS kullanarak view transitions'ı özelleştirebilirsiniz. Tarayıcı, CSS seçicilerle hedefleyebileceğiniz ayrı geçiş öğeleri oluşturur.

Özel geçişler oluşturmak için:

view-transition-name ekleyin - Animasyon yapmak istediğiniz öğelere benzersiz adlar atayın
Global animasyonlar tanımlayın - Global stillerinizde CSS animasyonları oluşturun
Geçiş sözde öğelerini hedefleyin - ::view-transition-old() ve ::view-transition-new() seçicilerini kullanın

İşte bir sayaç öğesine döndürme efekti ekleyen bir örnek:

/* Keyframe animasyonlarını tanımla */
@keyframes rotate-out {
  to {
    transform: rotate(90deg);
  }
}

@keyframes rotate-in {
  from {
    transform: rotate(-90deg);
  }
}

/* View transition sözde öğelerini hedefle */
::view-transition-old(count),
::view-transition-new(count) {
  animation-duration: 200ms;
  animation-name: -ua-view-transition-fade-in, rotate-in;
}

::view-transition-old(count) {
  animation-name: -ua-view-transition-fade-out, rotate-out;
}

IMPORTANT: View transition animasyonlarını bileşen stillerinde değil, global stil dosyanızda tanımlayın. Angular'ın görünüm kapsülleme özelliği bileşen stillerini kapsamlar ve bu da geçiş sözde öğelerini doğru şekilde hedeflemelerini engeller.

StackBlitz'de güncellenmiş "count" örneğini deneyin

onViewTransitionCreated ile gelişmiş geçiş kontrolü

withViewTransitions özelliği, view transitions üzerinde gelişmiş kontrol için onViewTransitionCreated callback'i olan bir seçenekler nesnesi kabul eder. Bu callback:

Bir enjeksiyon bağlamında çalışır
Aşağıdakileri içeren bir ViewTransitionInfo nesnesi alır:
- startViewTransition'dan gelen ViewTransition örneği
- Navigasyon yapılan kaynak rota için ActivatedRouteSnapshot
- Navigasyon yapılan hedef rota için ActivatedRouteSnapshot

Bu callback'i, navigasyon bağlamına göre geçiş davranışını özelleştirmek için kullanın. Örneğin, belirli navigasyon türleri için geçişleri atlayabilirsiniz:

import {inject} from '@angular/core';
import {Router, withViewTransitions, isActive} from '@angular/router';

withViewTransitions({
  onViewTransitionCreated: ({transition}) => {
    const router = inject(Router);
    const targetUrl = router.currentNavigation()!.finalUrl!;

    // Yalnızca fragment veya sorgu parametreleri değişiyorsa geçişi atla
    const config = {
      paths: 'exact',
      matrixParams: 'exact',
      fragment: 'ignored',
      queryParams: 'ignored',
    };

    const isTargetRouteCurrent = isActive(targetUrl, router, config);

    if (isTargetRouteCurrent()) {
      transition.skipTransition();
    }
  },
});

Bu örnek, navigasyon yalnızca URL fragment veya sorgu parametrelerini değiştirdiğinde (aynı sayfa içindeki bağlantı bağlantıları gibi) view transition'ı atlar. skipTransition() yöntemi, navigasyonun tamamlanmasına izin verirken animasyonu engeller.

Chrome açıklayıcısından Angular'a uyarlanan örnekler

Aşağıdaki örnekler, Chrome ekibinin dokümantasyonundan Angular Router ile kullanım için uyarlanmış çeşitli view transition tekniklerini gösterir:

Geçiş yapan öğelerin aynı DOM öğesi olması gerekmez

Öğeler, aynı view-transition-name'i paylaştıkları sürece farklı DOM öğeleri arasında sorunsuz geçiş yapabilir.

Özel giriş ve çıkış animasyonları

Rota geçişleri sırasında görünüm alanına giren ve çıkan öğeler için benzersiz animasyonlar oluşturun.

Asenkron DOM güncellemeleri ve içerik bekleme

Angular Router, ek içerik yüklenmesini beklemek yerine anında geçişlere öncelik verir.

Chrome Açıklayıcı

NOTE: Angular Router, view transitions'ı geciktirmenin bir yolunu sağlamaz. Bu tasarım seçimi, ek içerik beklenirken sayfaların etkileşimsiz kalmasını önler. Chrome dokümantasyonunun belirttiği gibi: "Bu süre boyunca sayfa dondurulur, bu nedenle buradaki gecikmeler minimumda tutulmalıdır...bazı durumlarda gecikmeyi tamamen önlemek ve zaten sahip olduğunuz içeriği kullanmak daha iyidir."