Hareket, kullanıcınızı bir etkileşimden diğerine yönlendirerek tüm dijital deneyimlerin temel bir parçasıdır. Ancak web platformunda sorunsuz animasyonlarda birkaç boşluk var. Giriş ve çıkış animasyonlarını kolayca animasyonlu hâle getirme ve iletişim kutuları ve pop-up'lar gibi kapatılabilir öğeler için üst katmana gidip gelme animasyonlarını sorunsuz bir şekilde animasyonlu hâle getirme gibi özellikler bu kapsamdadır.
Bu boşlukları doldurmak için Chrome 116 ve 117, ayrı mülkler için sorunsuz animasyonlar ve geçişler sağlayan dört yeni web platformu özelliği içerir.
Bu dört yeni özellikten bazıları şunlardır:
- Animasyon karesi zaman çizelgesinde
display
vecontent-visibility
öğelerini animasyonlu hale getirme özelliği (Chrome 116'dan itibaren). display
gibi ayrı mülklerin geçişlerini etkinleştirmek içinallow-discrete
anahtar kelimesini içerentransition-behavior
mülkü (Chrome 117'den itibaren).display: none
'dan üst katmana giriş efektlerini animasyonlu hale getirmek için kullanılan@starting-style
kuralı (Chrome 117'den itibaren).- Animasyon sırasında üst katman davranışını kontrol etmek için kullanılan
overlay
mülkü (Chrome 117'den itibaren).
Animasyonları animasyon karelerinde görüntüleme
Chrome 116'dan itibaren, anahtar kare kurallarında display
ve content-visibility
kullanabilirsiniz. Bunlar, ana kare oluştuğunda değiştirilir. Bunu desteklemek için ek yeni değerler gerekmez:
.card {
animation: fade-out 0.5s forwards;
}
@keyframes fade-out {
100% {
opacity: 0;
display: none;
}
}
Önceki örnekte, opaklık 0,5 saniye boyunca 0'a kadar animasyonlu olarak ayarlanır ve ardından görüntüleme yok olarak ayarlanır. Ayrıca forwards
anahtar kelimesi, animasyonun son durumunda kalmasını sağlar. Böylece, uygulandığı öğe display: none
ve opacity: 0
olarak kalır.
Bu, geçişlerle neler yapabileceğinizi gösteren basit bir örnektir (geçiş bölümündeki demoya bakın). Ancak geçişler, aşağıdaki örnekte gösterildiği gibi daha karmaşık animasyonlar oluşturamaz:
.card {
animation: spin-and-delete 1s ease-in forwards;
}
@keyframes spin-and-delete {
0% {
transform: rotateY(0);
filter: hue-rotate(0);
}
80% {
transform: rotateY(360deg);
filter: hue-rotate(180deg);
opacity: 1;
}
100% {
opacity: 0;
display: none;
}
}
spin-and-delete
animasyonu bir çıkış animasyonudur. Öncelikle kart y ekseni üzerinde döner, ton rotasyonu gerçekleştirir ve ardından zaman çizelgesinde 80%
'te opaklığını 1'den 0'a geçirir. Son olarak kart, display: block
yerine display: none
ile değiştirilir.
Bu çıkış animasyonları için doğrudan bir öğeye uygulamak yerine animasyonların tetikleyicisini ayarlayabilirsiniz. Örneğin, bir sınıfı tetikleyerek animasyonu uygulamak için bir düğmeye etkinlik işleyici ekleyerek:
.spin-out {
animation: spin-and-delete 1s ease-in forwards;
}
document.querySelector('.delete-btn').addEventListener('click', () => {
document.querySelector('.card').classList.add('spin-out');
})
Yukarıdaki örnekte artık display:none
son durumu vardır. Bu işlemi daha da ileri götürmek ve animasyonun önce bitmesini sağlamak için DOM düğümünü zaman aşımıyla kaldırmak istediğiniz birçok durum vardır.
Ayrı mülkler arasında geçiş yapma
Ayrı ayrı animasyonlu özellikler varsayılan olarak geçiş etkinliklerini tetiklemez. Bunu etkinleştirmek için geçiş davranışı modunu allow-discrete
olarak ayarlayın.
transition-behavior
mülkü
transition-behavior
mülkü, ayrı mülkler için geçişlerin başlatılıp başlatılmayacağını belirtir. İki değer kabul eder: normal
ve allow-discrete
. İlk değer normal
'tür.
normal
: Geçişler yalnızca kesikli mülkler için değil, aynı zamanda interpole edilebilir mülkler için de başlatılmaz.allow-discrete
: Ayrık mülklerin yanı sıra interpole edilebilir mülkler için geçişler başlatılır.
Belirli bir mülk için allow-discrete
modunu etkinleştirmek istiyorsanız mülkü transition
kısalığına ekleyin:
.card {
transition: opacity 0.25s, display 0.25s allow-discrete; /* Enable allow-discrete for the display property */
}
.card.fade-out {
opacity: 0;
display: none;
}
Birden fazla ayrı mülkü geçişe alırken her geçiş yapan mülk için allow-discrete
değerini ayarlamanız gerekir. Örneğin:
.card {
transition: opacity 0.5s, display 0.5s allow-discrete, overlay 0.5s allow-discrete;
}
Alternatif olarak, tüm geçiş yapan mülkler için davranışı ayarlamak üzere transition
beyanının ardından transition-behavior: allow-discrete
değerini belirtin. Bu genellikle en kolay yaklaşımdır.
.card {
transition: opacity 0.5s, display 0.5s, overlay 0.5s;
transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
Giriş animasyonları için @starting-style
kuralı
Bu makalede şimdiye kadar çıkış animasyonları ele alındı. Giriş animasyonları oluşturmak için @starting-style
kuralını kullanmanız gerekir.
Öğe sayfada açılmadan önce tarayıcı tarafından aranabilecek bir stil uygulamak için @starting-style
öğesini kullanın. Bu, "açılıştan önceki" durumdur (animasyonun başladığı yer).
/* 0. IS-OPEN STATE */
/* The state at which the element is open + transition logic */
.item {
height: 3rem;
display: grid;
overflow: hidden;
transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}
/* 1. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 2. EXITING STATE */
/* While it is deleting, before DOM removal in JS, apply this
transformation for height, opacity, and a transform which
skews the element and moves it to the left before setting
it to display: none */
.is-deleting {
opacity: 0;
height: 0;
display: none;
transform: skewX(50deg) translateX(-25vw);
}
Artık bu yapılacaklar listesi öğeleri için hem giriş hem de çıkış durumunuz var:
Öğeleri üst katmana ve üst katmandan animasyonlu olarak taşıma
Öğeleri üst katmandan ve üst katmana animasyonla taşımak için tarayıcıya animasyonu nereden başlatacağını belirtmek üzere "açık" durumunda @starting-style
değerini belirtin. İletişim kutuları için açık durum [open]
özelliğiyle tanımlanır. Pop-up için :popover-open
sözde sınıfını kullanın.
Basit bir iletişim kutusu örneği şu şekilde olabilir:
/* 0. IS-OPEN STATE */
dialog[open] {
translate: 0 0;
}
/* 1. BEFORE-OPEN STATE */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* 2. EXIT STATE */
dialog {
transition: translate 0.7s ease-out, overlay 0.7s ease-out allow-discrete, display 0.7s ease-out allow-discrete;
translate: 0 100vh;
}
Sonraki örnekte giriş ve çıkış efektleri farklıdır. Görüntü alanının alt kısmından yukarı doğru animasyon uygulayarak girin, efekti görüntü alanının üst kısmına doğru uygulayarak çıkın. Ayrıca daha fazla görsel kapsayıcı olması için iç içe yerleştirilmiş CSS ile yazılmıştır.
Pop-up'ı animasyonlu hale getirirken daha önce kullanılan open
özelliği yerine :popover-open
sözde sınıfını kullanın.
.settings-popover {
&:popover-open {
/* 0. IS-OPEN STATE */
/* state when popover is open, BOTH:
what we're transitioning *in* to
and transitioning *out* from */
transform: translateY(0);
opacity: 1;
/* 1. BEFORE-OPEN STATE */
/* Initial state for what we're animating *in* from,
in this case: goes from lower (y + 20px) to center */
@starting-style {
transform: translateY(20px);
opacity: 0;
}
}
/* 2. EXIT STATE */
/* Initial state for what we're animating *out* to ,
in this case: goes from center to (y - 50px) higher */
transform: translateY(-50px);
opacity: 0;
/* Enumerate transitioning properties,
including display and allow-discrete mode */
transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}
overlay
mülkü
Son olarak, üst katmandaki bir popover
veya dialog
öğesini yavaşça soldurmak için overlay
mülkünü geçiş listenize ekleyin. popover
ve dialog
, üst öğe kliplerinden ve dönüştürme işlemlerinden kaçar ve içeriği en üst katmana yerleştirir. overlay
geçişini yapmazsanız öğeniz hemen kırpılmış, dönüştürülmüş ve örtülmüş hâline geri döner ve geçişi görmezsiniz.
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
Bunun yerine, overlay
'yi diğer özelliklerle birlikte animasyonlu hale getirmek için geçişe veya animasyona ekleyin ve animasyon sırasında en üst katmanda kaldığından emin olun.overlay
Bu şekilde çok daha pürüzsüz bir görünüm elde edersiniz.
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
Ayrıca, üst katmanda birden fazla öğe açıkken yer paylaşımı, üst katmana giriş ve çıkışın sorunsuz olmasını sağlamanıza yardımcı olur. Farkı bu basit örnekte görebilirsiniz. İkinci pop-up'ı kapatırken overlay
özelliğini uygulamıyorsanız pop-up, geçişi başlatmadan önce önce üst katmandan çıkarak diğer pop-up'ın arkasına atlar. Bu efekt çok akıcı değildir.
Görüntü geçişleriyle ilgili not
DOM'da öğe ekleme ve kaldırma gibi değişiklikler yapıyorsanız görüntü geçişleri, sorunsuz animasyonlar için kullanabileceğiniz mükemmel bir çözümdür. Aşağıda, görüntü geçişleri kullanılarak oluşturulan yukarıdaki örneklerden iki tanesi verilmiştir.
Bu ilk demoda, @starting-style
ve diğer CSS dönüştürmelerini ayarlamak yerine görüntü geçişleri geçişi yönetir. Görüntüleme geçişi şu şekilde ayarlanır:
Öncelikle CSS'de her karta ayrı bir view-transition-name
verin.
.card-1 {
view-transition-name: card-1;
}
.card-2 {
view-transition-name: card-2;
}
/* etc. */
Ardından, JavaScript'te DOM mutasyonunu (bu durumda kartı kaldırma) bir görünüm geçişine sarın.
deleteBtn.addEventListener('click', () => {
// Check for browser support
if (document.startViewTransition) {
document.startViewTransition(() => {
// DOM mutation
card.remove();
});
}
// Alternative if no browser support
else {
card.remove();
}
})
Artık tarayıcı, her kartın kaybolmasını ve yeni konumuna dönüşmesini yönetebilir.
Bunun kullanışlı olabileceği bir diğer örnek de liste öğesi ekleme/kaldırma demosudur. Bu durumda, oluşturulan her kart için benzersiz bir view-transition-name
eklemeyi unutmayın.
Sonuç
Bu yeni platform özellikleri, web platformunda sorunsuz giriş ve çıkış animasyonları sunma hedefimize bir adım daha yaklaşmamızı sağlıyor. Daha fazla bilgi için şu bağlantılara göz atın: