Tek sayfalık uygulamalarda geçişleri görüntüleme

Web sayfalarında yaygın olarak kullanılan bir yöntem, yeni ve tam bir HTML dokümanı yüklemeden sayfadaki içeriği dinamik olarak değiştirmek için JavaScript'i kullanmaktır. Buna tek sayfalık uygulama (SPA) denir. Görünüm geçişleri, tek sayfalık uygulamanızdaki sayfalar arasında süreklilik veya bağlam göstermenizi sağlar.

Tam sayfa geçişleri

Kullanıcınız tek sayfalık uygulamanızda yeni bir görünüme gittiğinde, çerçeve DOM'u yeni içerikle değiştirir. Bu durumda içerik doğrudan gösterilir. Ancak mevcut içerik ile yeni içerik arasında geçiş sağlamak isterseniz ne yapmanız gerekir?

Geçişlerde genellikle hem eski hem de yeni görünümler aynı anda gösterilir. Örneğin, yeni görünüm belirginleşirken eski görünüm silikleşir. Mevcut içerik değiştirildiği için bu, görünüm geçişlerinden önce zorlu bir görevdi.

Görünüm geçişlerini kullanmak için DOM'u değiştirme mantığını bir geri çağırma işlevine sarmalamanız gerekir. Bu örneklerde, MyRouter adlı bir web bileşeni tarafından sağlanan temel bir yönlendirici uygulaması kullanıyoruz. Görünüm geçişlerini nasıl etkinleştireceğiniz, kullandığınız yönlendiriciye ve çerçeveye bağlıdır.

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

Bu, eski görünümü şeffaflaştırırken yeni görünümü görünür hale getiren varsayılan geçişi etkinleştirir.

Burada ne oluyor? document.startViewTransition() tuşuna bastığınızda tarayıcı, eski görünümün anlık görüntüsünü alır. Ardından, ilettiğiniz geri çağırma işlevini çağırır. Bu işlev, DOM'u yeni görünüme günceller (ancak henüz göstermez). Geri çağırma işlevi tamamlandığında tarayıcı, yeni içeriğe geçişi başlatır.

// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
  updateTheDOMSomehow();
  return;
} else {
  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

Geçişi özelleştirme

Önceki örnekte gördüğünüz gibi, varsayılan görünüm geçişi, yeni görünümü yavaş yavaş görünür hale getirirken eski görünümü yavaş yavaş görünmez hale getirir. Görünüm geçişleriyle oluşturulan sözde öğeleri stilize ederek geçişi sitenizin stiline daha iyi uyacak şekilde özelleştirebilirsiniz.

Ayrılma geçişini ::view-transition-old(), giriş geçişini ise ::view-transition-new() ile belirtebilirsiniz. Ayrıca, ::view-transition-group() ile her ikisi için de değer belirtebilirsiniz.

Bu örnekte, eski görünüm slide-out-to-left geçişi kullanılarak geçiş yapacak ve yeni görünüm slide-in-from-right geçişi kullanılarak geçiş yapacak. Her ikisinin de süresi 200 milisaniye olur.

::view-transition-group(root){
  animation-duration: 200ms;
}

::view-transition-old(root) {
  animation-name: slide-out-to-left;
}

::view-transition-new(root) {
  animation-name: slide-in-from-right;
}

Bağlama göre farklı geçişler

Kullanıcının yaptığı işleme göre farklı geçişler kullanmak isteyebilirsiniz. Örneğin, ana sayfanızdaki bir bağlantıyı tıkladığınızda yeni görünüm sağdan kayarak geliyorsa ana sayfanıza geri dönmek için bir bağlantıyı tıkladığınızda ana sayfa görünümünün soldan kayarak gelmesini beklersiniz.

:active-view-transition-type() sözde sınıfını kullanarak farklı animasyonlar belirtebilirsiniz.

html:active-view-transition-type(forwards) {
  &::view-transition-old(root) {
    animation-name: slide-out-to-left;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-from-right;
  }
}

Ardından document.startViewTransition() çağrılırken hangi görünüm geçişi türünün kullanılacağını seçebilirsiniz.

const direction = next === 'home' ? 'backwards' : 'forwards';

document.startViewTransition({
  update: updateTheDOMSomehow,
  types: [direction],
});

Belirli öğeleri geçiş yapma

Şimdiye kadar, görünümün tamamına geçiş uygulamak için yalnızca kök öğeye geçiş uyguluyordunuz. Ancak, sayalarınızın belirli bölümlerine animasyon eklemek için görünüm geçişlerini de kullanabilirsiniz.

Örneğin, eski görünümdeki içeriğiniz yeni görünümdeki içerikle eşleşebilir. Bu, içeriğin başlığı veya bir resim olabilir. Hatta eski görünümde küçük resim, yeni görünümde video olabilir.

Öncelikle, view-transition-name özelliğini kullanarak hangi öğelerin geçiş yapacağını belirtmeniz gerekir. Görünüm geçişlerinin çalışması için her view-transition-name'dan önce tam olarak bir öğe ve document.startViewTransition()'daki geri çağırma tamamlandıktan sonra tam olarak bir öğe olması gerekir.document.startViewTransition()

Bu örnekte, albüm kapağını, başlığı ve sanatçıyı gösteren bir müzik çalar bulunmaktadır. Alternatif görünümde, aynı içerik yeniden düzenlenmiş ve şarkı sözleri eklenmiş olarak gösterilir.

Önceki örnekte, eski ve yeni görünümde tam olarak birer tane geçiş yapılan öğe var ve hatta aynı seçicileri paylaşıyorlar. Geçiş yapılan öğeler, boyutları ve konumları arasında hareket ediyormuş gibi görünür. Görünümün geçiş yapılmayan kısımları şeffaflaşarak görünür ve kaybolur.

Daha karmaşık bir örneğe göz atalım. Örneğin, bir blog'un ana sayfasında her yayın için bir başlık ve resim gösterilebilir. Bunlar, blog yayınlarının tam sayfa görünümünde de yer alır. Ana sayfadan belirli bir yayına giderken, bağlam sağlamak için başlık ve resmin yeni konumlarına geçiş yapıyormuş gibi görünmesini sağlayabilirsiniz.

Bunu başlık için yapmak istiyorsanız eski görünümde benzersiz olan, yeni görünümdeki başlık öğesiyle paylaşılan ve yeni görünümde benzersiz olan bir başlık öğesine view-transition-name eklemeniz gerekir. Ana sayfada birden fazla başlık ve resim olduğundan ve kullanıcının hangisini tıklayacağını bilmediğinizden bu durum zorluk yaratır.

Bu sorunu çözmek için iki seçeneğiniz vardır. Ana sayfadaki her yayın için benzersiz bir view-transition-name ekleyebilir ve ardından bu adı her tam sayfa yayınla eşleştirebilirsiniz. Bunları bir gönderinin kimliğini kullanarak oluşturabilirsiniz. Diğer seçeneğiniz ise genel bir view-transition-name kullanmaktır ancak bunu yalnızca kullanıcı bir yayını tıkladıktan sonra ve document.startViewTransition() çağrılmadan önce uygulayın.

Geçiş tasarlama

Görünüm geçişleri, kullanıcılarınıza rehberlik etmek ve ek marka veya bağlam ipuçları sağlamak için kullanabileceğiniz bir dizi araçtır. Siteniz için uygun geçişleri bulmak üzere muhtemelen birden fazla teknik kullanacaksınız.

Aradığınız efektin türüne bağlı olarak öğeleri veya animasyonları da ayarlamanız gerekebilir. Önceki örnekte, sorunsuz geçişler elde etmek için çeşitli stiller ayarlanmıştı.

Başlıkta, sarmalanmayan metinleri (veya hem eski hem de yeni görünümde aynı sarmalamaya sahip metinleri) dönüştürürken kullanışlı olan width: fit-content kuralı vardır. Aksi takdirde, geçiş farklı genişliklere sahip öğeler arasında olabilir ve bu da geçişin daha az akıcı olmasına neden olur.

Resim, eski ve yeni görünümde farklı bir en boy oranına sahiptir. Örnekte, geçişin sorunsuz görünmesi için animasyon ve object-fit özelliği değiştiriliyor.

prefers-reduced-motion ile ilgili kurallara uyma

Kullanıcıların hareketi azaltma isteğinde bulunmasının yaygın bir nedeni, görünüm geçişleriyle elde edilebilenler gibi tam ekran animasyonların, vestibüler hareket bozukluğu olan kişilerde rahatsızlığa neden olabilmesidir. prefers-reduced-motion medya sorgusunu kullanarak animasyonları devre dışı bırakabilirsiniz. Ayrıca, öğelerin nasıl bağlandığını yine de ileten ancak daha ince olan alternatif animasyonlar da sağlayabilirsiniz.

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

Anlayıp anlamadığınızı kontrol etme