Angular 17 – View Transitions API

Merhaba,

Bu içeriğimizde Angular 17 ile gelmiş olan tarayıcıların View Transitions API özelliğini yapılandırma davranışının nasıl kullanılabileceğini inceliyor olacağız.

View Transitions API Nedir?

View Transitions API, web uygulamalarında kullanıcıların bilişsel yükünü azaltmak, bağlamda kalmalarına yardımcı olmak ve uygulamaların sayfaları arasında geçişler yaparken algılanan yükleme gecikmesinden kaynaklı kopuşları azaltmak için kullanılan animasyonel bir özelliktir. Bu özelliği daha net bir şekilde izah edebilmek için aşağıdaki ekran alıntılarını gözlemlemeniz yeterlidir;

View Transitions API kullanmaksızın…

View Transitions API kullanıldığında…

Angular’da View Transitions API Kullanımı

Angular mimarisinde View Transitions API’ı kullanmak oldukça basit bir konfigürasyona bakmaktadır. Bunu sade bir senaryo üzerinden tecrübe etmemizde fayda görmekteyim.

Şimdi bir Angular 17 projesi oluşturalım ve içerisine ‘persons’ ve ‘person-detail’ component’lerini ekleyelim.

Ardından ‘app.routes.ts’ dosyasında aşağıdaki gibi route path’lerini ayarlayalım.

import { Routes } from '@angular/router';

export const routes: Routes = [
    { path: "persons", loadComponent: async () => (await import("./components/persons/persons.component")).PersonsComponent },
    { path: "person-detail/:id", loadComponent: async () => (await import("./components/person-detail/person-detail.component")).PersonDetailComponent }
];

Şimdi gerekli altyapıyı kurguladığımıza göre esas meseleye odaklanabiliriz. Burada ‘PersonsComponent’te personel listelemesinde bulunacağız ve tıklanan personelin detayını da kullanıcıyı ‘PersonDetailComponent’e yönlendirerek sunacağız. Bu yönlendirme sürecinde de personel fotoğrafını View Transitions özelliği sayesinde animasyonel olarak detay sayfasına kaydırıyor olacağız.

Bunun için aşağıdaki dummy data’dan istifade edeceğiz.

export const persons: any[] = [
    {
        id: 1,
        name: "Hilmi",
        photo: "https://randomuser.me/api/portraits/men/7.jpg",
    },
    {
        id: 2,
        name: "Müslüm",
        photo: "https://randomuser.me/api/portraits/men/11.jpg",
    },
    {
        id: 3,
        name: "Çoşgun",
        photo: "https://randomuser.me/api/portraits/men/12.jpg",
    },
    {
        id: 4,
        name: "Şuayip",
        photo: "https://randomuser.me/api/portraits/men/19.jpg",
    },
].map(person => {
    return {
        ...person,
        viewTransitionName: `view-transition-name: person-${person.id}`
    }
});

Burada görüldüğü üzere 4 adet personel bilgisi mevcuttur. Lakin son noktada bir map işleminin yapıldığını ve tüm personellere ‘viewTransitionName’ field’ına karşılık
view-transition-name: person-${person.id} değerinin verildiğini görüyoruz. İşte bu değeri view transition animasyonu için her iki component’in ilgili noktalarında(img nesnesinde) style değeri olarak kullanacağız ve böylece her iki component’te de match olan bu değer sayesinde geçiş sürecinde animasyonu başlatmış olacağız.

Şimdi her iki component’in de içeriğini geliştirelim.

‘PersonsComponent’;

import { Component, inject } from '@angular/core';
import { RouterModule } from '@angular/router';
import { persons } from '../../datas';

@Component({
  selector: 'app-persons',
  standalone: true,
  imports: [RouterModule],
  template: `
    <div class="row">
      @for(person of personDatas; track $index)
      {
        <div class="col-md-3">
              <a routerLink="/person-detail/{{person.id}}">
                {{person.name}} <br>
                <img [src]="person.photo" [style]="person.viewTransitionName">
              </a>
        </div>
      }
    </div>
  `
})
export class PersonsComponent {
  personDatas: any[] = persons;
}

‘PersonDetailComponent’;

import { Component, inject } from '@angular/core';
import { persons } from '../../datas';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-person-detail',
  standalone: true,
  imports: [],
  template: `
  {{person.name}} <br>
  <img [src]="person.photo" [style]="person.viewTransitionName">
  `
})
export class PersonDetailComponent {
  activatedRoute: ActivatedRoute = inject(ActivatedRoute);
  person: any;
  ngOnInit() {
    const id = this.activatedRoute.snapshot.params["id"];
    this.person = persons.find(p => p.id == id);
    console.log(this.person);
  }
}

Yukarıdaki satırlarda mevzu bahis olan ‘viewTransitionName’ değerlerinin her iki component’te de img nesnesinin style attribute’una verildiğini görüyorsunuz.

Tüm bu yaptığımız çalışma neticesinde artık view transition’ın uygulama çapında davranış göstermesini istiyorsak eğer ‘app.config.ts’ dosyasında route’ların provide edildiği noktada aşağıdaki gibi withViewTransitions metodunu da çağırmamız gerekmektedir.

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withViewTransitions } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      routes,
      withViewTransitions()
    )]
};

Bu aşamadan sonra artık uygulamamızda view transition animasyonu başarıyla devrededir diyebiliriz.

İlgilenenlerin faydalanması dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Not : Örnek projeye aşağıdaki github adresinden erişebilirsiniz.
https://github.com/gncyyldz/view-transitions-example