Bu sayfa, Cloud Translation API ile çevrilmiştir.

Tek sayfalık uygulamalar için aynı doküman görünümü geçişleri

Jake Archibald

Bramus

Yayınlanma tarihi: 17 Ağustos 2021, Son güncelleme tarihi: 25 Eylül 2024

Tek bir dokümanda görüntü geçişi yapıldığında buna aynı doküman görüntü geçişi denir. Bu durum genellikle DOM'u güncellemek için JavaScript'in kullanıldığı tek sayfalık uygulamalarda (SPA'lar) görülür. Aynı belgedeki görünüm geçişleri, Chrome 111'den itibaren Chrome'da desteklenmektedir.

Aynı doküman görünümünde geçişi tetiklemek için document.startViewTransition işlevini çağırın:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Tetiklendiğinde tarayıcı, üzerinde view-transition-name CSS mülkünün tanımlandığı tüm öğelerin anlık görüntülerini otomatik olarak yakalar.

Ardından, DOM'u güncelleyen iletilen geri çağırma işlevini yürütür ve yeni durumun anlık görüntülerini alır.

Bu anlık görüntüler daha sonra sözde öğe ağacında düzenlenir ve CSS animasyonlarının gücü kullanılarak canlandırılır. Eski ve yeni durumdaki anlık görüntü çiftleri, eski konum ve boyutlarından yeni konumlarına sorunsuz bir şekilde geçiş yaparken içerikleri de yumuşak bir şekilde kaydırılır. Dilerseniz animasyonlarınızı CSS kullanarak özelleştirebilirsiniz.

Varsayılan geçiş: Geçiş efekti

Varsayılan görüntü geçişi, geçiş efekti olduğundan API'ye güzel bir giriş niteliğindedir:

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

updateTheDOMSomehow, DOM'u yeni duruma değiştirir. Bunu istediğiniz şekilde yapabilirsiniz. Örneğin, öğe ekleyebilir veya kaldırabilir, sınıf adlarını değiştirebilir ya da stilleri değiştirebilirsiniz.

Sayfalar böylece birbirine kademeli olarak kaybolur:

Varsayılan geçiş efekti. Minimal demo. Kaynak.

Tamam, geçiş çok etkileyici değil. Geçişler özelleştirilebilir. Ancak önce bu temel geçişin nasıl çalıştığını anlamanız gerekir.

Bu geçişlerin işleyiş şekli

Önceki kod örneğini güncelleyelim.

document.startViewTransition(() => updateTheDOMSomehow(data));

.startViewTransition() çağrıldığında API, sayfanın mevcut durumunu yakalar. Buna ekran görüntüsü alma da dahildir.

İşlem tamamlandığında .startViewTransition() adresine iletilen geri çağırma işlevi çağrılır. DOM burada değiştirilir. Ardından API, sayfanın yeni durumunu yakalar.

Yeni durum yakalandıktan sonra API aşağıdaki gibi bir sözde öğe ağacı oluşturur:

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

::view-transition, sayfadaki diğer her şeyin üzerinde yer alan bir yer paylaşımında bulunur. Bu seçenek, geçiş için bir arka plan rengi ayarlamak istiyorsanız kullanışlıdır.

::view-transition-old(root), eski görünümün ekran görüntüsüdür ve ::view-transition-new(root), yeni görünümün canlı temsilidir. Her ikisi de CSS "yerine geçen içerik" olarak oluşturulur (<img> gibi).

Eski görünüm opacity: 1'ten opacity: 0'e, yeni görünüm ise opacity: 0'ten opacity: 1'e animasyonlu olarak geçerek geçiş oluşturur.

Animasyonun tamamı CSS animasyonları kullanılarak gerçekleştirilir. Bu nedenle, CSS ile özelleştirilebilir.

Geçişi özelleştirme

Görünüm geçişi sözde öğelerinin tümü CSS ile hedeflenebiliyor. Animasyonlar CSS kullanılarak tanımlandığından, mevcut CSS animasyon özelliklerini kullanarak bunları değiştirebilirsiniz. Örneğin:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 5s;
}

Bu tek değişiklikle birlikte, geçiş çok yavaş olur:

Uzun geçiş efekti. Minimal demo. Kaynak.

Tamam, bu hâlâ etkileyici değil. Bunun yerine aşağıdaki kod, Material Design'ın paylaşılan eksen geçişini uygular:

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

Sonuç şöyle olur:

Paylaşılan eksen geçişi. Minimal demo. Kaynak.

Birden fazla öğe için geçiş yapma

Önceki demoda, ortak eksen geçişine sayfanın tamamı dahildir. Bu, sayfanın büyük bir kısmı için işe yarar ancak başlık için pek uygun değil. Çünkü başlık kaydırıldığında tekrar geri kaydırılır.

Bunu önlemek için üstbilgiyi sayfanın geri kalanından ayırarak ayrı olarak animasyonlu hale getirebilirsiniz. Bu işlem, öğeye bir view-transition-name atayarak yapılır.

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

view-transition-name değeri istediğiniz herhangi bir şey olabilir (none hariç. none, geçiş adı olmadığı anlamına gelir). Geçiş boyunca öğeyi benzersiz bir şekilde tanımlamak için kullanılır.

Bunun sonucunda:

Sabit üstbilgiyle paylaşılan eksen geçişi. Minimal demo. Kaynak.

Artık başlık yerinde kalıyor ve geçişler yumuşatılıyor.

Bu CSS beyanı, sözde öğe ağacının değişmesine neden oldu:

::view-transition
├─ ::view-transition-group(root)
│  └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)
│     └─ ::view-transition-new(root)
└─ ::view-transition-group(main-header)
   └─ ::view-transition-image-pair(main-header)
      ├─ ::view-transition-old(main-header)
      └─ ::view-transition-new(main-header)

Artık iki geçiş grubu vardır. Biri başlık, diğeri ise geri kalanı içindir. Bunlar CSS ile bağımsız olarak hedeflenerek farklı geçişler verilebilir. Ancak bu durumda main-header, varsayılan geçiş olan geçiş efektiyle bırakıldı.

Tamam, varsayılan geçiş sadece bir geçiş değil, ::view-transition-group de geçiş yapar:

Konumlandırma ve dönüştürme (transform kullanarak)
Genişlik
Boy

Başlık, DOM değişikliğinin her iki tarafında da aynı boyut ve konumda olduğundan bu durum şimdiye kadar önemli değildi. Ancak üstbilgideki metni de ayıklayabilirsiniz:

.main-header-text {
  view-transition-name: main-header-text;
  width: fit-content;
}

fit-content, öğenin kalan genişliğe uyacak şekilde uzaması yerine metnin boyutunda olması için kullanılır. Bu olmadan geri ok, her iki sayfada da aynı boyut yerine başlık metin öğesinin boyutunu azaltır.

Şimdi üç bölümle çalışacağız:

::view-transition
├─ ::view-transition-group(root)
│  └─ …
├─ ::view-transition-group(main-header)
│  └─ …
└─ ::view-transition-group(main-header-text)
   └─ …

Ancak yine de varsayılanları kullanacağız:

Kayan başlık metni. Minimal demo. Kaynak.

Başlık metni, geri düğmesine yer açmak için ekranda biraz kaydırılır.

`view-transition-class` ile birden fazla sözde öğeyi aynı şekilde animasyonlu hale getirme

Tarayıcı desteği

Sayfada bir grup kartın yanı sıra bir başlık içeren bir görüntü geçişiniz olduğunu varsayalım. Başlık dışındaki tüm kartları hareket ettirmek için her kartı ayrı ayrı hedefleyen bir seçici yazmanız gerekir.

h1 {
    view-transition-name: title;
}
::view-transition-group(title) {
    animation-timing-function: ease-in-out;
}

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
…
#card20 { view-transition-name: card20; }

::view-transition-group(card1),
::view-transition-group(card2),
::view-transition-group(card3),
::view-transition-group(card4),
…
::view-transition-group(card20) {
    animation-timing-function: var(--bounce);
}

20 öğeniz var mı? Bu durumda, yazmanız gereken 20 seçici vardır. Yeni bir öğe mi ekleyeceksiniz? Ardından, animasyon stillerini uygulayan seçiciyi de büyütmeniz gerekir. Tam olarak ölçeklenebilir değildir.

view-transition-class, aynı stil kuralını uygulamak için görünüm geçişi sözde öğelerinde kullanılabilir.

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
#card5 { view-transition-name: card5; }
…
#card20 { view-transition-name: card20; }

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

Aşağıdaki kart örneğinde önceki CSS snippet'inden yararlanılmıştır. Yeni eklenen kartlar da dahil olmak üzere tüm kartlara tek bir seçiciyle aynı zamanlama uygulanır: html::view-transition-group(.card).

Kartlar demosunun kaydı. view-transition-class kullanıldığında, eklenen veya kaldırılan kartlar hariç tüm kartlara aynı animation-timing-function uygulanır.

Geçişlerde hata ayıklama

Görünüm geçişleri CSS animasyonları temel alınarak oluşturulduğundan Chrome Geliştirici Araçları'ndaki Animasyonlar paneli, geçişlerde hata ayıklama için mükemmel bir seçenektir.

Animasyonlar panelini kullanarak bir sonraki animasyonu duraklatabilir, ardından animasyonda ileri ve geri gidebilirsiniz. Bu sırada geçiş sözde öğelerini Öğeler panelinde bulabilirsiniz.

Chrome Geliştirici Araçları ile görünüm geçişlerinde hata ayıklama.

Geçiş öğelerinin aynı DOM öğesi olması gerekmez.

Başlık ve başlıktaki metin için ayrı geçiş öğeleri oluşturmak üzere şimdiye kadar view-transition-name kullandık. Bunlar, DOM değişikliğinden önce ve sonra kavramsal olarak aynı öğedir ancak bunun geçerli olmadığı geçişler de oluşturabilirsiniz.

Örneğin, ana video yerleştirme için bir view-transition-name verilebilir:

.full-embed {
  view-transition-name: full-embed;
}

Ardından, küçük resim tıklandığında yalnızca geçiş süresi boyunca aynı view-transition-name verilebilir:

thumbnail.onclick = async () => {
  thumbnail.style.viewTransitionName = 'full-embed';

  document.startViewTransition(() => {
    thumbnail.style.viewTransitionName = '';
    updateTheDOMSomehow();
  });
};

Sonuç:

Bir öğenin diğerine geçişi. Minimal demo. Kaynak.

Küçük resim, ana resme geçiş yapar. Kavramsal olarak (ve kelimenin tam anlamıyla) farklı öğeler olsalar da geçiş API'si, aynı view-transition-name öğesini paylaştıkları için bunları aynı öğe olarak değerlendirir.

Bu geçişin gerçek kodu, küçük resim sayfasına geri geçişi de ele aldığından önceki örnekten biraz daha karmaşıktır. Uygulamanın tamamı için kaynağa bakın.

Özel giriş ve çıkış geçişleri

Aşağıdaki örneğe bakın:

Kenar çubuğuna girme ve kenar çubuğundan çıkma. Minimal demo. Kaynak.

Kenar çubuğu da geçişin bir parçasıdır:

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

Ancak önceki örnekteki üstbilginin aksine kenar çubuğu tüm sayfalarda görünmez. Her iki durumda da kenar çubuğu varsa geçiş sözde öğeleri şöyle görünür:

::view-transition
├─ …other transition groups…
└─ ::view-transition-group(sidebar)
   └─ ::view-transition-image-pair(sidebar)
      ├─ ::view-transition-old(sidebar)
      └─ ::view-transition-new(sidebar)

Ancak kenar çubuğu yalnızca yeni sayfadaysa ::view-transition-old(sidebar) sözde öğesi orada olmaz. Kenar çubuğu için "eski" resim olmadığından resim çiftinde yalnızca ::view-transition-new(sidebar) bulunur. Benzer şekilde, kenar çubuğu yalnızca eski sayfadaysa resim çiftinde yalnızca ::view-transition-old(sidebar) bulunur.

Önceki demoda, kenar çubuğu, gösterilmeye başlandığına, gösterilmeye son verildiğine veya her iki durumda da gösterildiğine bağlı olarak farklı geçişler yapıyor. Sağdan kaydırılarak ve yavaşça belirginleşerek girer, sağa kaydırılarak ve yavaşça kaybolarak çıkar ve her iki durumda da yerinde kalır.

Belirli giriş ve çıkış geçişleri oluşturmak için, resim çiftindeki tek alt öğe olduğunda eski veya yeni sözde öğeleri hedeflemek üzere :only-child sözde sınıfını kullanabilirsiniz:

/* Entry transition */
::view-transition-new(sidebar):only-child {
  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Exit transition */
::view-transition-old(sidebar):only-child {
  animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}

Bu durumda, varsayılan ayar mükemmel olduğu için kenar çubuğu her iki durumda da mevcut olduğunda belirli bir geçiş yoktur.

Eşzamansız DOM güncellemeleri ve içerik bekleme

.startViewTransition() işlevine iletilen geri çağırma işlevi, bir promise döndürebilir. Bu promise, DOM'un eşzamansız olarak güncellenmesine ve önemli içeriğin hazır olmasını beklemeye olanak tanır.

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

Taahhüt yerine getirilene kadar geçiş başlatılmaz. Bu süre zarfında sayfa dondurulur. Bu nedenle, gecikmelerin en aza indirilmesi gerekir. Daha açık belirtmek gerekirse, ağ getirme işlemleri .startViewTransition() geri çağırma işlevinin bir parçası olarak değil, .startViewTransition() çağrılmadan önce, sayfa henüz tamamen etkileşime açıkken yapılmalıdır.

Resimlerin veya yazı tiplerinin hazır olmasını beklemeye karar verirseniz agresif bir zaman aşımı kullandığınızdan emin olun:

const wait = ms => new Promise(r => setTimeout(r, ms));

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

  // Pause for up to 100ms for fonts to be ready:
  await Promise.race([document.fonts.ready, wait(100)]);
});

Ancak bazı durumlarda gecikmeyi tamamen önlemek ve mevcut içeriği kullanmak daha iyidir.

Mevcut içeriklerinizden en iyi şekilde yararlanın

Küçük resim daha büyük bir resme geçtiğinde:

Küçük resmin daha büyük bir resme geçişi. Demo sitesini deneyin.

Varsayılan geçiş, geçiş efektidir. Bu, küçük resmin henüz yüklenmemiş tam resimle geçiş efekti uygulayabileceği anlamına gelir.

Bu sorunu çözmenin bir yolu, geçişi başlatmadan önce resmin tamamını yüklemesini beklemektir. İdeal olarak bu işlem, .startViewTransition() çağrısı yapılmadan önce yapılır. Böylece sayfa etkileşimli kalır ve kullanıcıya bir şeylerin yüklendiğini göstermek için bir döndürme çubuğu gösterilebilir. Ancak bu durumda daha iyi bir yol var:

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
}

Artık küçük resim kaybolmuyor, tam resmin altında kalıyor. Yani yeni görünüm yüklenmemişse küçük resim geçiş boyunca görünür. Bu sayede geçiş hemen başlayabilir ve resmin tamamı kendi zamanında yüklenebilir.

Yeni görünümde şeffaflık varsa bu işlem işe yaramaz. Ancak bu durumda şeffaflık olmadığından bu optimizasyonu yapabiliriz.

En boy oranında yapılan değişiklikleri işleme

Şimdiye kadar yapılan tüm geçişler aynı en boy oranına sahip öğelere yapılmıştır ancak bu her zaman böyle olmaz. Küçük resim 1:1, ana resim ise 16:9 ise ne olur?

En boy oranında değişiklikle bir öğenin diğerine geçişi. Minimal demo. Kaynak.

Varsayılan geçişte grup, önceki boyuttan sonraki boyuta animasyonla geçer. Eski ve yeni görünümler, grubun% 100 genişliğinde ve otomatik yüksekliktedir. Yani grup boyutundan bağımsız olarak en boy oranlarını korurlar.

Bu, iyi bir varsayılan ayardır ancak bu durumda istenen ayar değildir. Bu durumda:

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
  /* Make the height the same as the group,
  meaning the view size might not match its aspect-ratio. */
  height: 100%;
  /* Clip any overflow of the view */
  overflow: clip;
}

/* The old view is the thumbnail */
::view-transition-old(full-embed) {
  /* Maintain the aspect ratio of the view,
  by shrinking it to fit within the bounds of the element */
  object-fit: contain;
}

/* The new view is the full image */
::view-transition-new(full-embed) {
  /* Maintain the aspect ratio of the view,
  by growing it to cover the bounds of the element */
  object-fit: cover;
}

Yani genişlik genişledikçe küçük resim öğenin ortasında kalır ancak tam resim 1:1'den 16:9'a geçerken "kırpılmaz".

Daha ayrıntılı bilgi için Görüntü geçişleri: En boy oranı değişikliklerini ele alma başlıklı makaleyi inceleyin.

Farklı cihaz durumlarında geçişleri değiştirmek için medya sorgularını kullanma

Mobil cihazlarda ve masaüstünde farklı geçişler kullanabilirsiniz. Örneğin, mobil cihazlarda yandan tam kaydırma, masaüstünde ise daha hafif bir kaydırma gerçekleştiren bu örnek:

Bir öğenin diğerine geçişi. Minimal demo. Kaynak.

Bu, normal medya sorguları kullanılarak yapılabilir:

/* Transitions for mobile */
::view-transition-old(root) {
  animation: 300ms ease-out both full-slide-to-left;
}

::view-transition-new(root) {
  animation: 300ms ease-out both full-slide-from-right;
}

@media (min-width: 500px) {
  /* Overrides for larger displays.
  This is the shared axis transition from earlier in the article. */
  ::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }

  ::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }
}

Eşleşen medya sorgularına bağlı olarak hangi öğelere view-transition-name atadığınızı da değiştirebilirsiniz.

"Düşük hareket" tercihine tepki verme

Kullanıcılar, işletim sistemleri üzerinden azaltılmış hareketi tercih ettiklerini belirtebilir ve bu tercih CSS'de gösterilir.

Şu kullanıcılar için geçişleri engellemeyi seçebilirsiniz:

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

Ancak "az hareket" tercihi, kullanıcının hareket olmaması istediği anlamına gelmez. Önceki snippet yerine, öğeler arasındaki ilişkiyi ve veri akışını ifade eden daha ince bir animasyon seçebilirsiniz.

Görüntüleme geçişi türleriyle birden fazla görüntüleme geçişi stilini işleme

Tarayıcı desteği

Bazen belirli bir görünümden diğerine geçiş için özel olarak tasarlanmış bir geçiş gerekir. Örneğin, sayfalandırma sırasına göre bir sonraki veya önceki sayfaya giderken, sıradaki daha yüksek bir sayfaya mı yoksa daha düşük bir sayfaya mı gittiğinize bağlı olarak içeriği farklı bir yönde kaydırabilirsiniz.

Sayfalandırma demosunun kaydı. Geçişler, hangi sayfaya gittiğinize bağlı olarak farklı olur.

Bunun için etkin bir görüntüleme geçişine bir veya daha fazla tür atamanıza olanak tanıyan görüntüleme geçişi türlerini kullanabilirsiniz. Örneğin, sayfalara ayırma sırasına göre daha üst bir sayfaya geçerken forwards türünü, daha alt bir sayfaya geçerken backwards türünü kullanın. Bu türler yalnızca geçiş yakalarken veya gerçekleştirirken etkindir ve her tür, farklı animasyonlar kullanmak için CSS aracılığıyla özelleştirilebilir.

Aynı doküman görünümü geçişinde türleri kullanmak için types öğesini startViewTransition yöntemine iletirsiniz. Buna izin vermek için document.startViewTransition bir nesneyi de kabul eder: update, DOM'u güncelleyen geri çağırma işlevidir ve types, türleri içeren bir dizidir.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
});

Bu türlere yanıt vermek için :active-view-transition-type() seçiciyi kullanın. Hedeflemek istediğiniz type öğesini seçiciye iletin. Bu sayede, bir tanesinin beyanları diğerinin beyanlarını etkilemeden birden fazla görüntü geçişinin stillerini birbirinden ayrı tutabilirsiniz.

Türler yalnızca geçişi yakalarken veya gerçekleştirirken geçerli olduğundan, seçiciyi kullanarak bir öğede yalnızca söz konusu türdeki görüntüleme geçişi için view-transition-name ayarlayabilir veya kaldırabilirsiniz.

/* Determine what gets captured when the type is forwards or backwards */
html:active-view-transition-type(forwards, backwards) {
  :root {
    view-transition-name: none;
  }
  article {
    view-transition-name: content;
  }
  .pagination {
    view-transition-name: pagination;
  }
}

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

/* Animation styles for backwards type only */
html:active-view-transition-type(backwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-right;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-left;
  }
}

/* Animation styles for reload type only (using the default root snapshot) */
html:active-view-transition-type(reload) {
  &::view-transition-old(root) {
    animation-name: fade-out, scale-down;
  }
  &::view-transition-new(root) {
    animation-delay: 0.25s;
    animation-name: fade-in, scale-up;
  }
}

Aşağıdaki sayfalara ayırma denemesinde, sayfa içerikleri, gittiğiniz sayfa numarasına göre ileri veya geri kayar. Türler tıklama sırasında belirlenir ve document.startViewTransition öğesine iletilir.

Türünden bağımsız olarak tüm etkin görünüm geçişlerini hedeflemek için bunun yerine :active-view-transition sözde sınıf seçicisini kullanabilirsiniz.

html:active-view-transition {
    …
}

Bazen belirli bir görüntüleme türünden diğerine geçiş için özel olarak tasarlanmış bir geçiş gerekir. "Geri" gezinme düğmesi, "ileri" gezinme düğmesinden farklı olmalıdır.

"Geri"ye giderken farklı geçişler. Minimal demo. Kaynak.

Geçiş türleri kullanılmadan önce bu durumların üstesinden gelmenin yolu, geçiş kökünde geçici olarak bir sınıf adı ayarlamaktı. document.startViewTransition çağrılırken bu geçiş kökü, JavaScript'te document.documentElement kullanılarak erişilebilen <html> öğesidir:

if (isBackNavigation) {
  document.documentElement.classList.add('back-transition');
}

const transition = document.startViewTransition(() =>
  updateTheDOMSomehow(data)
);

try {
  await transition.finished;
} finally {
  document.documentElement.classList.remove('back-transition');
}

Geçiş tamamlandıktan sonra sınıfları kaldırmak için bu örnekte, geçiş son durumuna ulaştığında çözülen bir söz olan transition.finished kullanılır. Bu nesnenin diğer özellikleri API referansında ele alınmıştır.

Artık geçişi değiştirmek için CSS'nizde bu sınıf adını kullanabilirsiniz:

/* 'Forward' transitions */
::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms
      cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Overrides for 'back' transitions */
.back-transition::view-transition-old(root) {
  animation-name: fade-out, slide-to-right;
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, slide-from-left;
}

Medya sorgularında olduğu gibi, bu sınıfların varlığı hangi öğelerin view-transition-name almasını değiştirmek için de kullanılabilir.

Diğer animasyonlar dondurulmadan geçişler yapma

Video geçiş konumunu gösteren bu demoya göz atın:

Video geçişi. Minimal demo. Kaynak.

Cihazda bir sorun gördünüz mü? Bulamadıysanız endişelenmeyin. Aşağıda, yavaşlatılmış olarak görebilirsiniz:

Video geçişi, daha yavaş. Minimal demo. Kaynak.

Geçiş sırasında video donmuş gibi görünür, ardından videonun oynatılan sürümü yavaşça görünür hale gelir. Bunun nedeni, ::view-transition-old(video)'ün eski görünümün ekran görüntüsü, ::view-transition-new(video)'un ise yeni görünümün canlı görüntüsü olmasıdır.

Bu sorunu düzeltebilirsiniz ancak önce düzeltmeye değip değmeyeceğini kendinize sorun. Geçiş normal hızda oynatıldığında "sorunu" görmediyseniz değiştirmenizi önermem.

Gerçekten düzeltmek istiyorsanız ::view-transition-old(video) simgesini göstermeyin, doğrudan ::view-transition-new(video) simgesine geçin. Bunu, varsayılan stilleri ve animasyonları geçersiz kılarak yapabilirsiniz:

::view-transition-old(video) {
  /* Don't show the frozen old view */
  display: none;
}

::view-transition-new(video) {
  /* Don't fade the new view in */
  animation: none;
}

Hepsi bu kadar!

Video geçişi, daha yavaş. Minimal demo. Kaynak.

Artık video geçiş boyunca oynatılıyor.

Navigation API (ve diğer çerçeveler) ile entegrasyon

Görüntü geçişleri, diğer çerçevelere veya kitaplıklara entegre edilebilecek şekilde belirtilir. Örneğin, tek sayfalık uygulamanız (SPA) bir yönlendirici kullanıyorsa yönlendiricinin güncelleme mekanizmasını, içeriği bir görünüm geçişi kullanarak güncelleyecek şekilde ayarlayabilirsiniz.

Bu sayfalandırma demosundan alınan aşağıdaki kod snippet'inde Navigation API'nin müdahale işleyicisi, görünüm geçişleri desteklendiğinde document.startViewTransition işlevini çağıracak şekilde ayarlanmıştır.

navigation.addEventListener("navigate", (e) => {
    // Don't intercept if not needed
    if (shouldNotIntercept(e)) return;

    // Intercept the navigation
    e.intercept({
        handler: async () => {
            // Fetch the new content
            const newContent = await fetchNewContent(e.destination.url, {
                signal: e.signal,
            });

            // The UA does not support View Transitions, or the UA
            // already provided a Visual Transition by itself (e.g. swipe back).
            // In either case, update the DOM directly
            if (!document.startViewTransition || e.hasUAVisualTransition) {
                setContent(newContent);
                return;
            }

            // Update the content using a View Transition
            const t = document.startViewTransition(() => {
                setContent(newContent);
            });
        }
    });
});

Tarayıcıların tümü olmasa da bazıları, kullanıcı gezinmek için kaydırma hareketi yaptığında kendi geçişini sağlar. Bu durumda, kötü veya kafa karıştırıcı bir kullanıcı deneyimine yol açacağından kendi görünüm geçişinizi tetiklememelisiniz. Kullanıcı, biri tarayıcı tarafından diğeri sizin tarafınızdan sağlanan iki geçişin art arda çalıştığını görür.

Bu nedenle, tarayıcı kendi görsel geçişini sağladığında görüntü geçişinin başlatılmasını önlemek önerilir. Bunu yapmak için NavigateEvent örneğinin hasUAVisualTransition mülkünün değerini kontrol edin. Tarayıcı görsel geçiş sağladığında özellik true olarak ayarlanır. Bu hasUIVisualTransition özelliği PopStateEvent örneklerinde de bulunur.

Önceki snippet'te, görüntüleme geçişinin çalışıp çalışmayacağını belirleyen kontrol bu özelliği dikkate alır. Aynı doküman görünüm geçişleri desteklenmediği veya tarayıcı zaten kendi geçişini sağladığında görünüm geçişi atlanır.

if (!document.startViewTransition || e.hasUAVisualTransition) {
  setContent(newContent);
  return;
}

Aşağıdaki kayıtta, kullanıcı önceki sayfaya geri gitmek için ekranı kaydırmaktadır. Soldaki yakalamada hasUAVisualTransition işareti yoktur. Sağdaki kayıtta onay işareti yer alır. Bu nedenle, tarayıcı görsel bir geçiş sağladığı için manuel görüntüleme geçişi atlanır.

hasUAVisualTransition için kontrol olmadan (solda) ve genişlik (sağda) aynı sitenin karşılaştırması

etkinleştirildiğinde kullanılabilir.

JavaScript ile animasyon

Şimdiye kadar tüm geçişler CSS kullanılarak tanımlandı ancak bazen CSS yeterli değildir:

Çevre geçişi. Minimal demo. Kaynak.

Bu geçişin birkaç kısmı yalnızca CSS ile yapılamaz:

Animasyon, tıklama konumundan başlar.
Animasyon, en uzak köşeye kadar yarıçapı olan çemberle sona erer. Ancak gelecekte CSS ile bu mümkün olacaktır.

Neyse ki Web Animation API'yi kullanarak geçişler oluşturabilirsiniz.

let lastClick;
addEventListener('click', event => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y)
  );

  // With a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root's new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: 'ease-in',
        // Specify which pseudo-element to animate
        pseudoElement: '::view-transition-new(root)',
      }
    );
  });
}

Bu örnekte, geçiş sözde öğeleri başarıyla oluşturulduktan sonra çözülen bir söz transition.ready kullanılır. Bu nesnenin diğer özellikleri API referansında ele alınmıştır.

Geçişler bir iyileştirme olarak

View Transition API, bir DOM değişikliğini "sarmalamak" ve bunun için bir geçiş oluşturmak üzere tasarlanmıştır. Ancak geçiş bir iyileştirme olarak ele alınmalıdır. Yani DOM değişikliği başarılı olsa bile geçiş başarısız olursa uygulamanız "hata" durumuna girmemelidir. İdeal olarak geçiş başarısız olmamalıdır ancak başarısız olursa kullanıcı deneyiminin geri kalanı etkilenmemelidir.

Geçişleri bir geliştirme olarak ele almak için geçiş taahhütlerini, geçiş başarısız olursa uygulamanızın hata vermesine neden olacak şekilde kullanmamaya dikkat edin.

Yapılmaması gerekenler:

async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  await transition.ready;

  document.documentElement.animate(
    {
      clipPath: [`inset(50%)`, `inset(0)`],
    },
    {
      duration: 500,
      easing: 'ease-in',
      pseudoElement: '::view-transition-new(root)',
    }
  );
}

Bu örnekteki sorun, geçiş ready durumuna ulaşamazsa switchView()'ün reddetmesidir. Ancak bu, görünümün geçiş yapamadığı anlamına gelmez. DOM başarıyla güncellenmiş olabilir ancak yinelenen view-transition-name'ler olduğu için geçiş atlandı.

Bunun yerine:

Yapılması gerekenler

async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  animateFromMiddle(transition);

  await transition.updateCallbackDone;
}

async function animateFromMiddle(transition) {
  try {
    await transition.ready;

    document.documentElement.animate(
      {
        clipPath: [`inset(50%)`, `inset(0)`],
      },
      {
        duration: 500,
        easing: 'ease-in',
        pseudoElement: '::view-transition-new(root)',
      }
    );
  } catch (err) {
    // You might want to log this error, but it shouldn't break the app
  }
}

Bu örnekte, DOM güncellemesini beklemek ve başarısız olursa reddetmek için transition.updateCallbackDone kullanılır. switchView artık geçiş başarısız olursa reddetmiyor. DOM güncellemesi tamamlandığında çözülüyor ve başarısız olursa reddediyor.

switchView'ün, yeni görünüm "yerleştiği" zaman (ör. animasyonlu geçiş tamamlandığında veya sona atlandığında) çözülmesini istiyorsanız transition.updateCallbackDone'ü transition.finished ile değiştirin.

Bir polyfill değil ancak…

Bu, polyfill olarak eklemesi kolay bir özellik değildir. Ancak bu yardımcı işlev, görünüm geçişlerini desteklemeyen tarayıcılarda işleri çok daha kolaylaştırır:

function transitionHelper({
  skipTransition = false,
  types = [],
  update,
}) {

  const unsupported = (error) => {
    const updateCallbackDone = Promise.resolve(update()).then(() => {});

    return {
      ready: Promise.reject(Error(error)),
      updateCallbackDone,
      finished: updateCallbackDone,
      skipTransition: () => {},
      types,
    };
  }

  if (skipTransition || !document.startViewTransition) {
    return unsupported('View Transitions are not supported in this browser');
  }

  try {
    const transition = document.startViewTransition({
      update,
      types,
    });

    return transition;
  } catch (e) {
    return unsupported('View Transitions with types are not supported in this browser');
  }
}

Bu işlev şu şekilde kullanılabilir:

function spaNavigate(data) {
  const types = isBackNavigation ? ['back-transition'] : [];

  const transition = transitionHelper({
    update() {
      updateTheDOMSomehow(data);
    },
    types,
  });

  // …
}

Görüntüleme geçişlerini desteklemeyen tarayıcılarda updateDOM çağrılmaya devam eder ancak animasyonlu geçiş olmaz.

Ayrıca, geçiş sırasında <html> öğesine eklenecek bazı classNames öğeleri de sağlayabilirsiniz. Bu sayede geçişi gezinme türüne göre değiştirmek daha kolay olur.

Animasyon istemiyorsanız görünüm geçişlerini destekleyen tarayıcılarda bile true değerini skipTransition olarak da iletebilirsiniz. Bu, sitenizde geçişleri devre dışı bırakmak için kullanıcı tercihi varsa kullanışlıdır.

Çerçevelerle çalışma

DOM değişikliklerini soyutlayan bir kitaplık veya çerçeveyle çalışıyorsanız en zor kısım, DOM değişikliğinin ne zaman tamamlandığını bilmektir. Çeşitli çerçevelerde yukarıdaki yardımcıyı kullanan bir dizi örnek aşağıda verilmiştir.

React: Buradaki anahtar, bir dizi durum değişikliğini eşzamanlı olarak uygulayan flushSync işlevidir. Evet, bu API'nin kullanımıyla ilgili önemli bir uyarı var ancak Dan Abramov bu durumda uygun olduğunu söyledi. React ve asynkron kodda olduğu gibi, startViewTransition tarafından döndürülen çeşitli promise'leri kullanırken kodunuzun doğru durumda çalıştığından emin olun.
Vue.js: Buradaki anahtar nextTick'tır. Bu anahtar, DOM güncellendikten sonra doldurulur.
Svelte: Vue'a çok benzer ancak sonraki değişikliği beklemek için kullanılan yöntem tick'tır.
Lit: Buradaki anahtar, DOM güncellendikten sonra yerine getirilen bileşenlerdeki this.updateComplete vaadidir.
Angular: Buradaki anahtar, bekleyen DOM değişikliklerini temizleyen applicationRef.tick'tır. Angular 17 sürümü itibarıyla @angular/router ile birlikte gelen withViewTransitions'ü kullanabilirsiniz.

API referansı

const viewTransition = document.startViewTransition(update)

Yeni bir ViewTransition başlatın.

update, belgenin mevcut durumu yakalandıktan sonra çağrılan bir işlevdir.

Ardından, updateCallback tarafından döndürülen söz yerine getirildiğinde geçiş bir sonraki karede başlar. updateCallback tarafından döndürülen söz reddedilirse geçiş iptal edilir.

const viewTransition = document.startViewTransition({ update, types })

Belirtilen türlerle yeni bir ViewTransition başlatma

update, belgenin mevcut durumu yakalandıktan sonra çağrılır.

types, geçişi yakalarken veya gerçekleştirirken geçiş için etkin türleri ayarlar. Bu klasör başlangıçta boştur. Daha fazla bilgi için aşağıdaki viewTransition.types bölümüne bakın.

ViewTransition örneğinin üyeleri:

viewTransition.updateCallbackDone

updateCallback tarafından döndürülen söz yerine getirildiğinde yerine getiren veya reddedildiğinde reddeden bir söz.

Görüntüleme Geçişi API'si, bir DOM değişikliğini sarmalayarak geçiş oluşturur. Ancak bazen geçiş animasyonunun başarılı olup olmadığını değil, DOM değişikliğinin olup olmadığını ve ne zaman gerçekleştiğini bilmek istersiniz. updateCallbackDone, bu kullanım alanı içindir.

viewTransition.ready

Geçiş için sözde öğeler oluşturulduktan ve animasyon başlamak üzereyken yerine getirilen bir söz.

Geçiş başlatılamazsa reddeder. Bunun nedeni, yinelenen view-transition-name'ler gibi yanlış yapılandırma veya updateCallback'un reddedilen bir promise döndürmesi olabilir.

Bu, geçiş sözde öğelerini JavaScript ile canlandırmak için kullanışlıdır.

viewTransition.finished

Son durum kullanıcı tarafından tamamen görünür ve etkileşimli hale geldiğinde yerine getirilen bir söz.

Yalnızca updateCallback reddedilen bir söz döndürürse reddeder. Bu, son durumun oluşturulmadığını gösterir.

Aksi takdirde, bir geçiş başlatılamazsa veya geçiş sırasında atlanırsa son duruma yine ulaşılır. Bu nedenle finished koşulu karşılanır.

viewTransition.types

Etkin görüntüleme geçişinin türlerini barındıran Set benzeri bir nesne. Girişlerde değişiklik yapmak için clear(), add() ve delete() örnek yöntemlerini kullanın.

CSS'de belirli bir türe yanıt vermek için geçiş kökündeki :active-view-transition-type(type) sözde sınıf seçicisini kullanın.

Görünüm geçişi tamamlandığında türler otomatik olarak temizlenir.

viewTransition.skipTransition()

Geçişin animasyon bölümünü atlama.

DOM değişikliği geçişten ayrı olduğundan bu durumda updateCallback çağrısı atlanmaz.

Varsayılan stil ve geçiş referansı

::view-transition

Görüntü alanını dolduran ve her ::view-transition-group öğesini içeren kök sözde öğe.

::view-transition-group

Kesin konumlandırma.

"Önce" ve "sonra" durumları arasında width ve height geçişleri.

Görüntü alanı-uzay dörtgeni "önce" ve "sonra" arasında geçişler transform.

::view-transition-image-pair

Grubu dolduracak şekilde konumlandırılmış.

mix-blend-mode'un eski ve yeni görüntülemeler üzerindeki etkisini sınırlamak için isolation: isolate'e sahiptir.

::view-transition-new ve ::view-transition-old

Sarmalayıcının sol üst tarafına mutlak olarak yerleştirilir.

Grup genişliğinin% 100'ünü doldurur ancak otomatik yüksekliğe sahiptir. Bu nedenle, grubu doldurmak yerine en boy oranını korur.

Gerçek bir geçişe izin vermek için mix-blend-mode: plus-lighter değerine sahiptir.

Eski görünüm opacity: 1'ten opacity: 0'e geçer. Yeni görünüm, opacity: 0'ten opacity: 1'e geçiş yapar.

Geri bildirim

Geliştiricilerden geri bildirim almak bizim için çok değerlidir. Bunun için GitHub'daki CSS Çalışma Grubu'na öneri ve sorularla ilgili bir sorun bildirin. Sorununuza [css-view-transitions] öneki ekleyin.

Hatayla karşılaşırsanız bunun yerine Chromium hata bildiriminde bulunun.