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

Bramus

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

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

• Animasyon stilleri, view-transition-class ile görünüm geçişi sözde öğeleri arasında paylaşılıyor.
• Etkin türlere sahip seçmeli görünüm geçişleri.

Bu iyileştirmeler hem tek sayfalık uygulamalar (SPA) için aynı doküman görüntüleme geçişlerinde hem de MPA için belgeler arası görüntüleme geçişlerinde geçerlidir.

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

Chrome 111'de Chrome ekibi, web oluşturma topluluğunda kabul gören bir özellik olan tek sayfalık uygulamalar için aynı doküman görünümü geçişlerini kullanıma sundu.

Çoğunuzun görüntüleme geçişleriyle neler ürettiğini görmek sevindirici. "Küçük resmin büyük bir fotoğrafa dönüşmesini" sağlayan tipik uygulamalardan bazıları son derece özelleştirilmiş etkileyici deneyimlere kadar geniş bir kitleye hitap ediyor. Olağanüstü!

Ancak, ilk uygulama, görünüm geçişlerini kullanmak için bir SPA oluşturmanızı gerektiriyordu. Chrome 126 sürümünden itibaren bu durum artık geçerli değildir. Aynı kaynak gezinmeleri için görüntüleme geçişleri artık varsayılan olarak etkinleştirilmiştir. Artık aynı kaynağa sahip iki farklı doküman arasında bir görüntüleme geçişi oluşturabilirsiniz.

Belgeler arası görünüm geçişlerini etkinleştirmek için her iki tarafın da etkinleştirilmesi gerekir. Bunu yapmak için @view-transition kuvvetini kullanın ve navigation tanımlayıcısını auto olarak ayarlayın.

@view-transition {
  navigation: auto;
}

Belgeler arası görünüm geçişlerinde, aynı doküman görünümü geçişleriyle aynı yapı taşları ve ilkeleri kullanılır. view-transition-name uygulanmış öğeler yakalanır. CSS animasyonlarını kullanarak animasyonları ö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 önce giden sayfada bazı 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, belgeler arası görünüm geçişini eski ve yeni hedef geçmişi girişlerine veya gezinme türüne göre özelleştirmek için bir NavigationActivation nesnesine erişiminiz vardır.

Ayrıca, görünüm geçişi çalıştırılmadan önce yükleme süresini iyileştirmek için içeriğin oluşturma engelleme özelliğiyle yüklenmesini bekleyebilir ve önceden işlemeden 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 belgeler arası gezinmeye sahip 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üntüleme geçişleri dokümanımıza göz atın.

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

Chrome, MPA için belgeler arası görünüm geçişlerini göndermenin yanı sıra, genel olarak görüntüleme geçişleriyle çalışma konusunda birkaç iyileştirme içerir.

Bu iyileştirmeler, hem SPA için aynı doküman görüntüleme geçişlerinde hem de MPA için belgeler arası görüntüleme geçişlerinde geçerlidir.

Animasyon stillerini view-transition-class ile paylaş

Şimdiye kadar, birden fazla anlık görüntüyü aynı şekilde canlandırırken, benzersiz bir view-transition-name değerine sahip her öğe için sözde seçiciyi tekrarlayarak her bir anlık görüntüyü tek tek 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 durumda, otomatik olarak birden çok öğeye kadar ö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 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 için view-transition-class sayfasındaki özel dokümanları okuyun.

Etkin türlere sahip seçmeli görünüm geçişleri

Geçişleri görüntülemeyle ilgili bir başka ayrıntılandırma da, görüntüleme ve gerçekleştirme sırasında görünüm geçişine tür ekleme özelliğinin kullanıma sunulmasıdır. Bu sayede, birisine ilişkin bildirimler diğerini değiştirmeye gerek kalmadan, aynı sayfada çeşitli görünüm geçişleriyle kolayca çalışmak kolaylaşır.

Örneğin, sayfalara ayırma dizisinde sonraki veya önceki sayfaya giderken, dizideki daha üst veya 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 temizlemeniz gerekir.

Görüntüleme geçişi türleriyle aynı sonucu elde edebilirsiniz. Ayrıca bu türlerin ek avantajı, görünüm geçişi tamamlandıktan sonra otomatik olarak temizlenir. 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 types yöntemini startViewTransition yöntemine iletin. update, DOM'yi güncelleyen geri çağırma işlevidir. types ise bir 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 pageswap ve pagereveal etkinliklerinde bunları 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ünüm geçişi türleri hakkında daha fazla bilgi edinmek için aynı doküman görünümü geçişleri ve dokümanlar arası görünüm geçişleri ile ilgili özel belgeleri inceleyin.

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. Sorununuzun önüne [css-view-transitions] ekleyin.

Bir hatayla karşılaşırsanız bunun yerine Chromium hatası bildirin.