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üntü geçişleri için bir sonraki adımı duyurmuştuk: çok sayfalı uygulamalar (MPA) için belgeler arası görüntü geçişleri.

Bununla birlikte, genel olarak görüntü geçişleriyle daha kolay çalışmanıza olanak tanıyan bazı iyileştirmeler de paylaştım.

• view-transition-class ile görünüm geçişi sözde öğeleri arasında animasyon stillerini paylaşma.
• Etkin türlerle seçmeli görüntü 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üman arası görünüm geçişleri için geçerlidir.

MPA'lar için belgeler arası görüntüleme geçişleri

Chrome 111'de Chrome Ekibi, web sitesi geliştirme topluluğu tarafından beğenilen bir özellik olan tek sayfalık uygulamalar için aynı belge görünüm geçişlerini kullanıma sundu.

Birçok kullanıcımızın görüntü geçişleriyle neler oluşturduğunu görmek çok güzel. "Küçük resmin büyük fotoğrafa dönüştüğü" tipik uygulamalardan Airbnb'deki bu gibi son derece özelleştirilmiş, sürükleyici deneyimlere kadar çeşitlilik gösterir. Olağanüstü!

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

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

@view-transition {
  navigation: auto;
}

Doküman içi görünüm geçişleri, aynı doküman görünüm geçişleriyle aynı yapı taşlarını ve ilkeleri kullanır. view-transition-name uygulanmış öğeler yakalanır ve CSS animasyonlarını kullanarak animasyonlarınızı ö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, yeni sayfayı başlatıldıktan sonra oluşturulmaya başlamadan önce özelleştirebilirsiniz.

Her iki etkinlikte de eski ve yeni hedef geçmişi girişlerine ya da gezinme türüne göre belgeler arası görüntü geçişini özelleştirmek için bir NavigationActivation nesnesine erişebilirsiniz.

Ayrıca, görüntü geçişi başlamadan önce yükleme süresini iyileştirmek için içeriğin oluşturulmasını engelleme özelliğini kullanarak içeriğin yüklenmesini bekleyebilir ve ön oluşturma özelliğinden yararlanabilirsiniz.

Demo

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

Bu, aynı kaynakta barındırılan ve dokümanlar arası gezinme olanağı sunan 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

Doküman arası görüntü geçişlerinin nasıl etkinleştirileceği ve özelleştirileceği hakkında daha fazla bilgi için doküman arası görüntü geçişleri dokümanımıza bakın.

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

Chrome, MPA için belgeler arası görüntü geçişlerini kullanıma sunmanın yanı sıra genel olarak görüntü geçişleriyle çalışmayla ilgili birkaç iyileştirme de içeriyor.

Bu iyileştirmeler hem SPA'lar için aynı doküman görünümü geçişleri hem de MPA'lar için doküman arası görünüm geçişleri için geçerlidir.

Animasyon stillerini view-transition-class ile paylaşma

Şimdiye kadar, birden fazla anlık görüntüyü aynı şekilde animasyona dönüştürürken benzersiz view-transition-name değerine sahip her öğe için sözde seçicisini tekrarlayarak her anlık görüntüyü ayrı ayrı hedeflemeniz gerekiyordu.

Artık view-transition-class ile tüm anlık görüntülere paylaşılan 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 birden çok öğeye otomatik olarak ölçeklendirilen ç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 kartlar örneği, tek seçici kullanarak aynı animasyon zamanlamasını birçok anlık görüntüye uygulamak için view-transition-class özelliğini kullanır.

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

Etkin türlerle seçmeli görüntüleme geçişleri

Görüntü geçişlerinde yapılan bir diğer iyileştirme de, görüntü geçişi kaydederken ve gerçekleştirirken geçişe tür ekleme özelliğinin kullanıma sunulmasıdır. Bu sayede, bir sayfadaki çeşitli görüntüleme geçişleriyle çalışmayı kolaylaştırır ve bir tanesinin beyanları diğerini değiştirmez.

Örneğin, sayfalara ayırma sıralarında bir sonraki veya önceki sayfaya giderken, sıradaki daha üst bir sayfaya mı yoksa daha alt bir sayfaya mı gittiğinize bağlı olarak farklı animasyonlar kullanmak isteyebilirsiniz.

Etkin türlerden önce, DOM'ye sınıf ekleyebilir ve bu sınıflara CSS'nizde yanıt verebilirsiniz. Ancak geçişler tamamlandıktan sonra da temizleme yapmanız gerekir.

Görüntüleme geçişi türleriyle aynı sonucu elde edebilirsiniz. Ayrıca, görüntüleme geçişi tamamlandıktan sonra bu türlerin otomatik olarak temizlenmesi gibi bir avantaj da elde edersiniz. Türler yalnızca geçiş yakalanırken veya gerçekleştirilirken geçerlidir.

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

const direction = determineBackwardsOrForwards();

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

Belgeler arası görüntüleme geçişi için types tanımlayıcısını kullanarak @view-transition at-kuralında türleri ayarlayın veya 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ş kökü için geçerli olan :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üntü geçişi türleri hakkında daha fazla bilgi edinmek için aynı belgedeki görüntü geçişleri ve belgeler arası görüntü geçişleri ile ilgili özel dokümanlara bakın.

Geri bildirim

Geliştirici geri bildirimleri bizim için çok değerli. Bunu yapmak için öneriler ve sorularla GitHub'da CSS Çalışma Grubu'na sorun bildirin. Sorununuza [css-view-transitions] öneki ekleyin.

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