Kullanıcınızı bir etkileşimden diğerine yönlendiren hareket, her dijital deneyimin temel bir parçasıdır. Ancak web platformundaki akıcı animasyonlarda birkaç eksik vardır. Bu özellikler arasında, giriş ve çıkış animasyonlarını kolayca canlandırmanın yanı sıra iletişim kutuları ve pop-up'lar gibi kapatılabilir öğeler için üst katmana geçişte sorunsuz olarak animasyon uygulanması yer alır.
Chrome 116 ve 117, bu boşlukları doldurmak için, ayrı mülkler için düzgün animasyonlar ve geçişler sağlayan dört yeni web platformu özelliği içeriyor.
Bu dört yeni özellik şunlardır:
- Bir animasyon karesi zaman çizelgesinde
displayvecontent-visibilityanimasyonları yapabilme (Chrome 116'dan itibaren). displaygibi ayrı mülklerin geçişlerini etkinleştirmek içinallow-discreteanahtar kelimesini içerentransition-behaviorözelliği (Chrome 117'den itibaren).display: noneuygulamasından üst katmana (Chrome 117'den) giriş efektlerini animasyon eklemek için@starting-stylekuralı.- Animasyon sırasında üst katman davranışını kontrol etmek için kullanılan
overlayözelliği (Chrome 117'den). ## Animasyon karelerinde animasyon görüntüleme
Chrome 116'da animasyon karesi kurallarında display ve content-visibility kullanabilirsiniz. Ardından, animasyon karesi oluştuğunda bunlar değişir. Bunu desteklemek için ek yeni değerler gerekmiyor:
.card {
animation: fade-out 0.5s forwards;
}
@keyframes fade-out {
100% {
opacity: 0;
display: none;
}
}
Yukarıdaki örnekte opaklığa 0,5 sn.boyunca 0 olarak animasyon uygulanır ve daha sonra görüntüleme yok değerine ayarlanır. Buna ek olarak, forwards anahtar kelimesi, animasyonun bitiş durumunda kalmasını ve böylece uygulandığı öğenin display: none ve opacity: 0 kalmasını sağlar.
Bu, bir geçişle yapabileceklerinizi taklit eden basit bir örnektir (geçiş bölümündeki demoya bakın). Ancak geçişler aşağıdaki örnek 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. Kart önce y ekseninde döner, bir ton rotasyonundan geçer ve ardından zaman çizelgesi boyunca 80% sırasında opaklığını 1'den 0'a geçirir. Son olarak kart, display: block yerine display: none olur.
Bu çıkış animasyonlarında, bunları doğrudan bir öğeye uygulamak yerine animasyonlar için bir tetikleyici ayarlayabilirsiniz. Örneğin, bir sınıfı animasyonu uygulamak üzere tetikleyen bir düğmeye aşağıdaki şekilde bir etkinlik işleyici ekleyebilirsiniz:
.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 olan bir bitiş durumu mevcuttur. Birçok durumda bu işlemi bir adım ileri götürüp animasyonun önce bitmesini sağlamak için zaman aşımına sahip DOM düğümünü kaldırın.
Ayrı animasyonları geçirme
Animasyon kareleriyle ayrı özellikleri animasyon haline getirmenin aksine, ayrı özellikleri taşımak için allow-discrete geçiş davranışı modunu kullanmanız gerekir.
transition-behavior özelliği
allow-discrete modu, ayrı geçişleri mümkün kılar ve transition-behavior özelliğinin bir değeridir. transition-behavior, iki değeri kabul eder: normal ve allow-discrete.
.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}
.card.fade-out {
opacity: 0;
display: none;
}
transition kısayolu da bu değeri ayarlar. Böylece özelliği atlayabilir ve her geçiş için transition kısaltmasının sonunda allow-discrete anahtar kelimesini kullanabilirsiniz.
.card {
transition: opacity 0.5s, display 0.5s allow-discrete;
}
.card.fade-out {
opacity: 0;
display: none;
}
Birden fazla münferit mülk canlandırıyorsanız canlandırmak istediğiniz her özellikten sonra allow-discrete eklemeniz gerekir. Örneğin:
.card {
transition: opacity 0.5s, display 0.5s allow-discrete, overlay 0.5s allow-discrete;
}
.card.fade-out {
opacity: 0;
display: none;
}
Giriş animasyonları için @starting-style kuralı
Şu ana kadar bu makalede çıkış animasyonları ele alınmıştır. Giriş animasyonları oluşturmak için @starting-style kuralını kullanmanız gerekir.
Öğe sayfada açılmadan önce tarayıcının arayabileceği bir stil uygulamak için @starting-style politikasını kullanın. Bu, "açılmadan önceki" durumdur (animasyonu yaptığınız yer).
/* 0. BEFORE-OPEN STATE */
/* Starting point for the transition */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}
/* 1. 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;
}
/* 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 YAPILACAKLAR listesi öğeleri için hem giriş hem de çıkış durumunuz vardır:
Üst katmana giden ve katmandan ayrılan öğelere animasyon ekleme
Üst katmana ve üst katmandan öğelere animasyon eklemek için tarayıcıya nereden animasyonun yapılacağını belirtmek üzere "açık" durumda @starting-style belirtin. Bir iletişim kutusunda 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. BEFORE-OPEN STATE */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* 1. IS-OPEN STATE */
dialog[open] {
translate: 0 0;
}
/* 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. Animasyonu görüntü alanının alt kısmından yukarıya doğru kaydırarak girin, efektten görüntü alanının üst kısmına geçin. Ayrıca, daha fazla görsel kapsülleme için iç içe yerleştirilmiş CSS ile yazılmıştır.
Pop-up animasyon yaparken daha önce kullanılan open özelliği yerine :popover-open sözde sınıfını kullanın.
.settings-popover {
&:popover-open {
/* 0. 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;
}
/* 1. IS-OPEN STATE */
/* state when popover is open, BOTH:
what we're transitioning *in* to
and transitioning *out* from */
transform: translateY(0);
opacity: 1;
}
/* 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 tesis
Son olarak, üst katmandaki bir popover veya dialog efektini karartmak için geçiş listenize overlay özelliğini ekleyin. popover ve dialog kaçış üst öğesi klipleri ve dönüşümlerinin yanı sıra içeriği en üst katmana da yerleştirir. overlay için geçiş yapmazsanız öğeniz hemen kırpılmaya, dönüştürülmeye ve örtülmeye devam eder. Geçişi görmezsiniz.
[open] {
transition: opacity 1s, display 1s allow-discrete;
}
Bunun yerine, diğer özelliklerle birlikte overlay animasyonu için geçişe veya animasyona overlay ekleyin ve animasyon sırasında üst katmanda kaldığından emin olun. Bu çok daha düzgün görünür.
[open] {
transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}
Buna ek olarak, üst katmanda birden fazla öğe açık olduğunda, yer paylaşımı, üst katmanın içine ve dışına yumuşak geçişi kontrol etmenize yardımcı olur. Bu basit örnekte farkı görebilirsiniz. Geçişi gerçekleştirirken ikinci pop-up'a overlay eklemezseniz bu öğe geçişe başlamadan önce en üst katmanın dışına çıkar, diğer pop-up'ın arkasına atlanır. Bu çok sorunsuz bir efekt değildir.
Görünüm geçişleriyle ilgili bir not
DOM'ye öğe ekleme ve DOM'den öğe kaldırma gibi DOM değişiklikleri yapıyorsanız, işitsel animasyonlar için bir başka harika çözüm de görünüm geçişleridir. Görünüm geçişleri kullanılarak oluşturulan yukarıdaki örneklerden ikisi aşağıda verilmiştir.
Bu ilk demoda, geçişi @starting-style ve diğer CSS dönüşümlerini ayarlamak yerine görünüm geçişleri gerçekleştirecektir. Görünüm geçişi şu şekilde ayarlanır:
İlk olarak, 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 bir görünüm geçişinde sarmalayın (bu örnekte kartı kaldırı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 solma ve şeklini yeni konumuna geçirebilir.
Bunun kullanışlı olabileceği başka bir ö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, bizi web platformundaki sorunsuz giriş ve çıkış animasyonlarına bir adım daha yaklaştırıyor. Daha fazla bilgi edinmek için şu bağlantılara göz atın: