Görüntüleme geçişlerindeki yenilikler nelerdir? (Google I/O 2024 güncellemesi)

Bramus

Yayınlanma tarihi: 16 Mayıs 2024

Google I/O 2024'te, görünüm geçişleriyle ilgili bir sonraki adımı duyurmuştum: çok sayfalı uygulamalar (MPA) için belgeler arası görünüm geçişleri.

Ayrıca, genel olarak görünüm geçişleriyle daha kolay çalışmanızı sağlayacak bazı iyileştirmelerden bahsettim.

• view-transition-class ile görünüm geçişi sözde öğeleri arasında animasyon stillerini paylaşma.
• Etkin türlerle seçici görünüm geçişleri.

Bu iyileştirmeler hem tek sayfalık uygulamalar (SPA) için aynı doküman görünümü geçişleri hem de MPA için dokümanlar arası görünüm geçişleri için geçerlidir.

Çok sayfalı uygulamalar için belgeler arası görünüm geçişleri

Chrome 111'de Chrome Ekibi, web geliştirme topluluğunda büyük beğeni toplayan bir özellik olan tek sayfalık uygulamalar için aynı doküman görünümü geçişlerini kullanıma sundu.

Birçoğunuzun görünüm geçişleriyle neler geliştirdiğini görmek harika. "Küçük resmi büyüyerek büyük fotoğrafa dönüştüren" tipik uygulamalardan Airbnb'nin bu örneğinde olduğu gibi son derece özelleştirilmiş, etkileyici deneyimlere kadar. Olağanüstü!

Ancak ilk uygulamada, görünüm geçişlerini kullanmak için bir SPA oluşturmanız gerekiyordu. Chrome 126'dan itibaren bu durum değişti. Artık aynı kaynaklı gezinmeler için görünüm geçişleri varsayılan olarak etkinleştiriliyor. Artık aynı kaynaklı iki farklı doküman arasında görünüm geçişi oluşturabilirsiniz.

Belgeler arası görünüm geçişlerini etkinleştirmek için her iki tarafın da bu özelliği etkinleştirmesi gerekir. Bunun için @view-transition at-rule'u kullanın ve navigation tanımlayıcısını auto olarak ayarlayın.

@view-transition {
  navigation: auto;
}

Dokümanlar arası görünüm geçişleri, aynı dokümandaki görünüm geçişleriyle aynı yapı taşlarını ve ilkeleri kullanır. view-transition-name uygulanmış öğeler yakalanır ve animasyonları CSS animasyonlarını kullanarak özelleştirebilirsiniz.

Dokümanlar arası görünüm geçişlerini özelleştirmek için görünüm geçişi nesnesine erişmenizi sağlayan pageswap ve pagereveal etkinliklerini kullanın.

• pageswap ile eski anlık görüntüler alınmadan hemen önce giden sayfada son dakika değişiklikleri yapabilirsiniz.
• pagereveal ile, başlatıldıktan sonra oluşturulmaya başlamadan önce yeni sayfayı özelleştirebilirsiniz.

Her iki etkinlikte de NavigationActivation nesnesine erişerek eski ve yeni hedef geçmişi girişlerine veya gezinme türüne göre belgeler arası görünüm geçişini özelleştirebilirsiniz.

Ayrıca, görünüm geçişi çalışmadan önce yükleme süresini iyileştirmek için oluşturma engelleme ile içeriğin yüklenmesini bekleyebilir ve önceden oluşturmaya güvenebilirsiniz.

Demo

Bu Stack Navigator demosu, tüm bu özellikleri (bazı iyileştirmelerle birlikte) bir araya getirir.

Bu, aynı kaynakta barındırılan, dokümanlar arası gezinmeler içeren bir MPA'dır. pagereveal kullanıldığında animasyon türü, eski ve yeni hedef geçmişi girişlerine göre belirlenir.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

Belgeleri okuyun

Belgeler arası görünüm geçişlerini etkinleştirme ve özelleştirme hakkında daha fazla bilgi için belgeler arası görünüm geçişleri dokümanımızı inceleyin.

Geçiş iyileştirmelerini görüntüleme

Chrome, MPA için dokümanlar arası görünüm geçişlerini desteklemenin yanı sıra genel olarak görünüm geçişleriyle çalışmayı kolaylaştıran birkaç iyileştirme de içerir.

Bu iyileştirmeler hem tek sayfalık uygulamalar için aynı doküman görünümü geçişleri hem de çok sayfalı uygulamalar için dokümanlar arası görünüm geçişleri için geçerlidir.

Animasyon stillerini view-transition-class ile paylaşma

Şimdiye kadar, aynı şekilde birden fazla anlık görüntüyü canlandırırken her bir anlık görüntüyü tek tek hedeflemeniz ve her öğe için benzersiz bir view-transition-name olan sözde seçiciyi tekrarlamanız gerekiyordu.

view-transition-class ile artık tüm anlık görüntülere ortak bir ad ekleyebilirsiniz. Eşleşen tüm anlık görüntüleri hedeflemek için sözde seçicilerde bu paylaşılan adı kullanın. Bu sayede, bir öğeden çok sayıda öğeye otomatik olarak ölçeklenen çok daha basit seçiciler elde edilir.

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

Aşağıdaki kart örneğinde, tek bir seçici kullanarak birçok anlık görüntüye aynı animasyon zamanlamasını uygulamak için view-transition-class kullanılır.

view-transition-class hakkında daha fazla bilgi edinmek için view-transition-class ile ilgili özel dokümanı okuyun.

Etkin türlerle seçici görünüm geçişleri

Görünüm geçişlerinde yapılan bir diğer iyileştirme, görünüm geçişi yakalanırken ve gerçekleştirilirken tür ekleme özelliğinin kullanıma sunulmasıdır. Bu sayede, birinin diğerini değiştirdiği bildirimler olmadan aynı sayfada çeşitli görünüm geçişleriyle çalışmak kolaylaşır.

Örneğin, sayfalara ayırma dizisinde bir sonraki veya önceki sayfaya giderken dizide daha yüksek veya daha düşük bir sayfaya gidip gitmediğinize bağlı olarak farklı animasyonlar kullanmak isteyebilirsiniz.

Etkin türlerden önce, sınıfları DOM'a ekleyip CSS'nizde bu sınıflara yanıt verebiliyordunuz. Ancak geçişler tamamlandıktan sonra temizlik yapmanız da gerekir.

Görünüm geçişi türleriyle aynı sonucu elde edebilirsiniz. Ayrıca, görünüm geçişi tamamlandıktan sonra bu türlerin otomatik olarak temizlenmesi gibi bir avantaj da elde edersiniz. Türler yalnızca geçişi yakalarken veya gerçekleştirirken uygulanır.

Aynı dokümanda görünüm geçişleri için artık bir nesneyi kabul eden types öğesini startViewTransition yöntemine iletin. update, DOM'u güncelleyen geri çağırma işlevidir ve types, dize dizisidir.

const direction = determineBackwardsOrForwards();

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

Belgeler arası görünüm geçişi için types tanımlayıcısını kullanarak @view-transition @kuralında türleri ayarlayın veya bunları pageswap ve pagereveal etkinliklerinde anında ayarlayın.

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

Türler ayarlandığında, görünüm geçişi köküne uygulanan :active-view-transition-type() ve :active-view-transition sözde sınıf seçicilerini kullanarak CSS'nizde bu türlere yanıt verebilirsiniz.

/* 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;
  }
}

Görünüm geçişi türleri hakkında daha fazla bilgi edinmek için aynı dokümandaki görünüm geçişleri ve dokümanlar arası görünüm geçişleri ile ilgili dokümanlara bakın.

Geri bildirim

Geliştiricilerin geri bildirimleri bizim için çok değerlidir. Bunun için GitHub'da CSS Çalışma Grubu ile ilgili bir sorun bildirerek önerilerinizi ve sorularınızı paylaşın. Sorununuzun başına [css-view-transitions] ekleyin.

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