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ı doküman görünümü geçişleri, Chrome 111'den itibaren Chrome'da desteklenmektedir.
Aynı doküman görüntüleme geçişini tetiklemek için document.startViewTransition
komutunu ç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'yi güncelleyen, iletilen geri çağırmayı yürütür ve ardından yeni durumun anlık görüntülerini alır.
Daha sonra bu anlık görüntüler, yapay öğelerden oluşan bir ağaçta 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ş yapar. Bu sırada içerikleri de yumuşak bir şekilde geçiş yapar. Dilerseniz animasyonlarınızı CSS kullanarak özelleştirebilirsiniz.
Varsayılan geçiş: Geçiş efekti
Varsayılan görünüm geçişi çapraz geçiştir; bu nedenle 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));
}
Burada updateTheDOMSomehow
, DOM'u yeni duruma değiştirir. Bunu istediğiniz gibi 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:
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 anlık görüntü almak 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 bir yer paylaşımında yer alır. 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 "değiştirilen 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, geçiş artık çok yavaş:
Tamam, yine de 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:
Birden fazla öğenin geçişini yapma
Önceki demoda, paylaşılan eksen geçişinde sayfanın tamamı yer almaktadır. 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.
Bu durumu önlemek için üstbilgiyi sayfanın geri kalanından ayıklayıp ayrı olarak animasyona ekleyebilirsiniz. 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 gibi olabilir (none
dışında, geçiş adı yoktur). Öğeyi geçiş boyunca benzersiz bir şekilde tanımlamak için kullanılır.
Bunun sonucunda:
Şimdi başlık yerinde kalıyor ve çapraz geçiş yapıyor.
Bu CSS bildirimi, 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ş yalnızca çapraz geçişten ibaret değildir. ::view-transition-group
ürününde de geçiş yapılır:
- 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 başlıktaki metni de çıkarabilirsiniz:
.main-header-text {
view-transition-name: main-header-text;
width: fit-content;
}
fit-content
kullanılır. Böylece öğe, kalan genişliğe uzatmak yerine metnin boyutuyla kapsanır. Bu olmadan, geri oku her iki sayfada aynı boyuta sahip olmak yerine başlık metin öğesinin boyutunu küçültür.
Şimdi üzerinde çalışacağımız üç bölüm var:
::view-transition
├─ ::view-transition-group(root)
│ └─ …
├─ ::view-transition-group(main-header)
│ └─ …
└─ ::view-transition-group(main-header-text)
└─ …
Ancak yine de varsayılanları kullanacağız:
Başlık metni şimdi geri düğmesine yer açmak için kaydırılıyor.
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, yazmanız gereken 20 seçici demektir. Yeni bir öğe mi ekliyorsunuz? Ardından, animasyon stillerini uygulayan seçiciyi 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 kartlar örneği, önceki CSS snippet'inden yararlanır. Yeni eklenenler de dahil olmak üzere tüm kartlara aynı zamanlama tek bir seçiciyle uygulanır: html::view-transition-group(.card)
.
Hata ayıklama geçişleri
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 geri oynatabilirsiniz. Bu sırada geçiş sözde öğelerini Öğeler panelinde bulabilirsiniz.
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, kavram olarak DOM değişikliğinden önce ve sonra aynı öğedir ancak böyle olmadığı durumlarda geçişler oluşturabilirsiniz.
Örneğin, yerleştirilmiş ana video öğesine view-transition-name
verilebilir:
.full-embed {
view-transition-name: full-embed;
}
Ardından, küçük resim tıklandığında yalnızca geçiş süresince aynı view-transition-name
değeri verilebilir:
thumbnail.onclick = async () => {
thumbnail.style.viewTransitionName = 'full-embed';
document.startViewTransition(() => {
thumbnail.style.viewTransitionName = '';
updateTheDOMSomehow();
});
};
Sonuç:
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. Eksiksiz uygulama için kaynağa bakın.
Özel giriş ve çıkış geçişleri
Şu örneği inceleyin:
Kenar çubuğu 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)
Bununla birlikte, kenar çubuğu yalnızca yeni sayfadaysa ::view-transition-old(sidebar)
sözde öğesi orada bulunmaz. 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 bir ::view-transition-old(sidebar)
olacaktır.
Ö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 bekleniyor
.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;
});
Geçiş, taahhüt yerine getirilene kadar başlamaz. Bu süre zarfında sayfa donduğu için buradaki gecikmeler minimum düzeyde tutulmalıdır. Ağ getirme işlemleri, .startViewTransition()
geri çağırma işleminin bir parçası olarak değil, sayfa hâlâ tamamen etkileşimli durumdayken .startViewTransition()
çağrılmadan önce 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 gecikmeden tamamen kaçınmak ve sahip olduğunuz içeriği kullanmak daha iyidir.
Elinizdeki içeriklerden en iyi şekilde yararlanın
Küçük resim daha büyük bir resme geçtiğinde:
Varsayılan geçiş çapraz geçiştir. Diğer bir deyişle, küçük resim henüz yüklenmemiş tam resimle çapraz geçiş yapabilir.
Bu sorunu çözmenin bir yolu, geçişi başlatmadan önce resmin tamamını yüklemesini beklemektir. İdeal olarak bu, .startViewTransition()
çağrılmadan önce yapılır. Böylece sayfa etkileşimli kalır ve kullanıcıya öğelerin yüklendiğini göstermek için bir döner simge 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 kaybolmaz, tam resmin altında kalır. Yani yeni görünüm yüklenmemişse küçük resim geçiş boyunca görünür. Bu, geçişin hemen başlayabileceği ve resmin tamamının kendi süresinde yükleneceği anlamına gelir.
Yeni görünümde şeffaflık olsa bu yöntem işe yaramazdı. Ancak bu durumda öyle olmadığını biliyoruz. Dolayısıyla bu optimizasyonu yapabiliriz.
En boy oranındaki 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 ve ana resim 16:9 ise ne olur?
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 değerdir ancak bu durumda istenen bu 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 Geçişleri görüntüleme: En boy oranı değişikliklerini işleme başlıklı makaleyi inceleyin.
Farklı cihaz durumlarında geçişleri değiştirmek için medya sorgularını kullanma
Mobilde ve masaüstünde farklı geçişler kullanmak isteyebilirsiniz. Örneğin, mobilde tam slaytın yan tarafından tam slayt gösterildiği, masaüstünde ise daha küçük bir slaytın gösterildiği şu örnekteki gibi:
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 view-transition-name
atadığınız öğeleri değiştirmek de isteyebilirsiniz.
"Düşük hareket" tercihine tepki verme
Kullanıcılar, işletim sistemlerinde daha az hareketi tercih ettiklerini belirtebilir ve bu tercih CSS'de gösterilir.
Bu kullanıcıların geçişlerini önlemeyi seçebilirsiniz:
@media (prefers-reduced-motion) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
Ancak, "azaltılmış hareket" tercihi kullanıcının hareket görmek istemediğ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, sayfalara ayırma sırasına göre sonraki veya önceki sayfaya giderken, dizideki daha üst veya daha alt bir sayfaya mı gittiğinize bağlı olarak içerikleri farklı bir yönde kaydırmak isteyebilirsiniz.
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 bir geçiş yakalanırken veya gerçekleştirilirken etkindir ve her tür farklı animasyonlar kullanmak için CSS aracılığıyla özelleştirilebilir.
Aynı doküman görünümünde geçişte 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'yi güncelleyen geri çağırma işlevidir, types
ise türlere sahip 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çicisini kullanın. Hedeflemek istediğiniz type
öğesini seçiciye iletin. Bu sayede, bir tanesinin bildirimleri diğerinin bildirimlerini etkilemeden birden fazla görüntü geçişinin stillerini birbirinden ayrı tutabilirsiniz.
Türler yalnızca geçiş yakalanırken veya gerçekleştirilirken geçerli olduğundan, yalnızca bu türe sahip görüntüleme geçişinde bir öğede view-transition-name
değerini ayarlamak (veya ayarını kaldırmak) için seçiciyi kullanabilirsiniz.
/* 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 sayfalandırma demosunda sayfa içerikleri, ziyaret ettiğiniz sayfa numarasına göre ileri veya geri kaydırılır. 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 {
…
}
Görünüm geçiş kökünde sınıf adı kullanarak birden fazla görünüm geçişi stilini işleme
Bazen belirli bir görüntüleme türünden diğerine geçiş için özel olarak tasarlanmış bir geçiş gerekir. Ya da 'geri' gezinme 'ileri' seçeneğinden farklı olmalıdır yardımcı olabilir.
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');
}
Bu örnekte, geçiş tamamlandıktan sonra sınıfları kaldırmak için transition.finished
kullanılmıştır. Geçiş, bitiş durumuna ulaştığında sona erer. Bu nesnenin diğer özellikleri API referansında ele alınmıştır.
Artık bu sınıf adını CSS'nizde kullanarak geçişi değiştirebilirsiniz:
/* '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:
Bir sorun gördünüz mü? Aksi halde merak etmeyin. Burada yavaşlayabilir:
Geçiş sırasında video donmuş gibi görünür, ardından videonun oynatma sürümü yavaşça açılır. 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.
Bunu düzeltebilirsiniz ama önce kendinize düzeltmenin gerekip gerekmediğini 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!
Artık video, geçiş boyunca oynatılır.
Gezinme API'si (ve diğer çerçeveler) ile entegrasyon
Görünüm geçişleri, diğer çerçevelerle veya kitaplıklarla entegre edilebilecek şekilde belirtilir. Örneğin, tek sayfalık uygulamanız (SPA) bir yönlendirici kullanıyorsa, görüntüleme geçişi kullanarak içeriği güncellemek için yönlendiricinin güncelleme mekanizmasını ayarlayabilirsiniz.
Bu sayfalara ayırma demosundan alınan aşağıdaki kod snippet'inde, görüntüleme geçişleri desteklendiğinde Gezinme API'sinin müdahale işleyicisi document.startViewTransition
çağrısı yapacak ş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);
});
}
});
});
Hepsi olmasa da bazı tarayıcılar, kullanıcı gezinmek için kaydırma hareketi yaptığında kendi geçişini sağlar. Bu durumda, olumsuz 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 bir görünüm geçişinin başlamasının engellenmesi önerilir. Bunu yapmak için NavigateEvent
örneğinin hasUAVisualTransition
mülkünün değerini kontrol edin. Tarayıcı bir görsel geçiş sağladığında özellik true
olarak ayarlanır. Bu hasUIVisualTransition
özelliği PopStateEvent
örnekte de mevcut.
Önceki snippet'te, görünüm geçişinin çalıştırılıp çalıştırılmayacağını belirleyen kontrolde bu mülk dikkate alınır. Aynı doküman görünümü geçişleri için destek yoksa veya tarayıcı kendi geçişini zaten sağlıyorsa görüntüleme 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.
JavaScript ile Animasyon Oluşturma
Şimdiye kadar tüm geçişler CSS kullanılarak tanımlandı ancak bazen CSS yeterli değildir:
Bu geçişin bazı bölümleri, tek başına CSS ile gerçekleştirilemez:
- Animasyon, tıklama konumundan başlar.
- Animasyon, dairenin en uzak köşeye kadar yarıçapında olmasıyla sona erer. Yine de bunun ileride CSS ile mümkün olacağını umuyoruz.
Neyse ki Web Animasyonu API'sini 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ümlenen bir taahhüt olan transition.ready
kullanılmaktadı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 bu geçiş, uygulamanız "hata" almamalıdır. Bunun gibi, bir iyileştirme olarak değerlendirilmelidir. durumu gösterir. İ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.
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:
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ılmaktadır. Geçiş başarısız olursa switchView
artık reddetmez. DOM güncellemesi tamamlandığında çözümlenir ve başarısız olursa reddeder.
Yeni görünüm 'yerleştirildiğinde' (örneğin, animasyonlu geçiş tamamlandığında veya sonuna kadar atlandığında) switchView
ürününün çözmesini istiyorsanız transition.updateCallbackDone
öğesini transition.finished
ile değiştirin.
Bir polyfill değil ancak…
Bu, çoklu doldurma için 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 kolay hale getirir:
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 classNames
sağlayabilirsiniz. Böylece, gezinme türüne bağlı olarak geçişi değiştirmeyi daha kolay hale getirebilirsiniz.
Görüntüleme geçişlerini destekleyen tarayıcılarda bile animasyon istemiyorsanız true
öğesini skipTransition
öğesine de iletebilirsiniz. Sitenizde geçişleri devre dışı bırakmaya yönelik bir kullanıcı tercihi varsa bu yararlı olur.
Ç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. Aşağıda, yukarıdaki yardımcıyı kullanarak çeşitli çerçevelerde bir dizi örnek verilmiştir.
- Tepki: Buradaki anahtar, bir dizi durum değişikliğini eşzamanlı olarak uygulayan
flushSync
'tır. Evet, bu API'nin kullanımıyla ilgili büyük bir uyarı var, ancak Dan Abramov, bu durumda uygun olduğunu söylüyor. React ve eşzamansız kodda her zamanki gibi,startViewTransition
tarafından döndürülen çeşitli özellikleri kullanırken kodunuzun doğru durumda çalıştığından emin olun. - Vue.js: Buradaki anahtar
nextTick
olup DOM güncellendikten sonra yerine getirilir. - Svelte: Vue'ya çok benzer ancak bir sonraki değişikliği bekleme yöntemi
tick
. - Açık: Buradaki temel nokta, bileşenlerde yer alan ve DOM güncellendikten sonra gerçekleşen
this.updateComplete
'tır. - Angular: Buradaki anahtar, bekleyen DOM değişikliklerini temizleyen
applicationRef.tick
'tır. Angular 17 sürümü itibarıyla@angular/router
ile birlikte gelenwithViewTransitions
'ü kullanabilirsiniz.
API referansı
const viewTransition = document.startViewTransition(update)
Yeni bir
ViewTransition
başlatın.update
, dokümanın mevcut durumu yakalandığında çağrılan bir işlevdir.Ardından,
updateCallback
tarafından verilen söz yerine getirildiğinde geçiş bir sonraki karede başlar.updateCallback
tarafından verilen taahhüt reddedilirse geçiş işlemi yarıda bırakılır.const viewTransition = document.startViewTransition({ update, types })
Belirtilen türlerle yeni bir
ViewTransition
başlatDokümanın geçerli durumu yakalandığında
update
çağrılır.types
, geçişi kaydederken veya gerçekleştirirken geçiş için etkin türleri ayarlar. Başlangıçta boştur. Daha fazla bilgi için aşağıya göz atınviewTransition.types
.
ViewTransition
örneğinin üyeleri:
viewTransition.updateCallbackDone
updateCallback
tarafından döndürülen söz yerine getirildiğinde yerine getiren veya söz reddedildiğinde reddeden bir söz.View Transition API, bir DOM değişikliğini sarmalayarak geçiş oluşturur. Bununla birlikte, bazen geçiş animasyonunun başarılı veya başarısız olması sizin için önemli değildir. Sadece DOM değişikliğinin olup olmadığını ve ne zaman gerçekleşeceğ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şlayamazsa işlemi reddeder. Bu durum, yinelenen
view-transition-name
öğeleri gibi yanlış yapılandırmadan veyaupdateCallback
ürününün reddedilen bir vaadi döndürmesinden kaynaklanıyor 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ülebildiğinde ve etkileşime açık olduğunda yerine getirilen bir söz.
Yalnızca
updateCallback
, son durumun oluşturulmadığını belirttiği için reddedilmiş bir taahhüt döndürürse reddedilir.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 yerine getirilir.viewTransition.types
Aktif görüntüleme geçişinin türlerini barındıran
Set
benzeri bir nesne. Girişleri değiştirmek içinclear()
,add()
vedelete()
örnek yöntemlerini kullanın.CSS'deki belirli bir türe yanıt vermek için geçiş kökünde
:active-view-transition-type(type)
sözde sınıf seçiciyi kullanın.Görünüm geçişi tamamlandığında türler otomatik olarak temizlenir.
viewTransition.skipTransition()
Geçişin animasyon kısmını atlayın.
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
Mutlaka konumlandırıldı.
"Öncesi" ile
width
veheight
geçişleri ve "sonrası" eyaletler."Öncesi" arasındaki
transform
geçişler ve "sonrası" görüntü alanı-boşluk dörtlüsü.::view-transition-image-pair
Mutlaka grubu dolduracak konumda.
mix-blend-mode
öğesinin eski ve yeni görünümler üzerindeki etkisini sınırlandırmak içinisolation: isolate
kullanabilir.::view-transition-new
ve::view-transition-old
Mutlaka sarmalayıcının sol üst tarafına yerleştirilmiş.
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
'tenopacity: 0
'e geçer. Yeni görünümopacity: 0
yerineopacity: 1
.
Geri bildirim
Geliştirici geri bildirimleri bizim için çok değerli. Bunu yapmak için GitHub'da CSS Çalışma Grubu ile ilgili bir sorun bildirin. Bu bildirimde önerilerinizi ve sorularınızı paylaşın. Sorununuza [css-view-transitions]
öneki ekleyin.
Hatayla karşılaşırsanız bunun yerine Chromium hata bildiriminde bulunun.