Sorunsuz giriş ve çıkış animasyonları için dört yeni CSS özelliği

Una Kravets

Joey Arhar

Hareket, kullanıcınızı bir etkileşimden diğerine yönlendirerek tüm dijital deneyimlerin temel bir parçasıdır. Bununla birlikte, web platformundaki akıcı animasyonlar konusunda bazı eksiklikler vardır. Giriş ve çıkış animasyonlarını kolayca animasyonlu hale 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 hale getirme gibi özelliklerden yararlanabilirsiniz.

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 özellik şunlardır:

• Animasyon karesi zaman çizelgesinde display ve content-visibility öğelerini animasyonlu hale getirme özelliği (Chrome 116'dan itibaren).
• display gibi ayrı mülklerin geçişlerini etkinleştirmek için allow-discrete anahtar kelimesini içeren transition-behavior mülkü (Chrome 117'den itibaren).
• display: none öğesinden üst katmana giriş efektlerini animasyonla göstermek için @starting-style kuralı (Chrome 117'den).
• Animasyon sırasında üst katman davranışını kontrol etmek için overlay özelliği (Chrome 117'den).

Animasyonları animasyon karelerinde görüntüleme

Chrome 116'dan itibaren, anahtar kare kurallarında display ve content-visibility kullanabilirsiniz. Daha sonra, animasyon karesi oluştuğu anda bu öğeler değişir. Bunu desteklemek için ek yeni değerler gerekmez:

.card {
  animation: fade-out 0.5s forwards;
}

@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}

belgesine bakın.

Not: Diğer ayrık özellikler, geçişin yumuşak geçiş işlevinin %50'sinde durum değiştirir. Ancak display ve content-visibility, geçişin başında (animasyonu içeriye doğru yapıyorsanız) veya sonunda (animasyonu dışarıya doğru yapıyorsanız) değişir.

Yukarıdaki örnekte, 0,5 sn.süre boyunca opaklık 0 olarak gösterilir, ardından görüntü 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 ö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. Ö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');
})

belgesine bakın.

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ık animasyonlar arasında geçiş yapma

Ayrık özellikleri anahtar karelerle canlandırırken aksine, ayrık özelliklerde geçiş yapmak için allow-discrete geçiş davranışı modunu kullanmanız gerekir.

transition-behavior mülkü

Ayrık geçişleri mümkün kılan allow-discrete modu, transition-behavior mülkünün bir değeridir. transition-behavior iki değer 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;
}

Not: Geçiş kısaltmasını kullanıyorsanız kısaltmanın geçerli olması için kısaltmadan sonra transition-behavior kullanmanız gerekir.

adlı kaleme bakın.

Not: Bu geçiş denemesinde, ilk animasyon denemesinden farklı bir teknik kullanılmış olsa da görsel olarak benzer bir görünüm elde edilmiştir.

transition kısayolu da bu değeri ayarlar. Bu nedenle, mülkü atlayabilir ve her geçiş için transition kısayolunun sonundaki allow-discrete anahtar kelimesini kullanabilirsiniz.

.card {
  transition: opacity 0.5s, display 0.5s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

Birden fazla ayrı mülkü animasyonlu hale getiriyorsanız animasyonlu hale getirmek istediğiniz her mülkün ardından 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;
}

Not: İpucu: Ayrık animasyonları dilediğiniz zaman * {transition-behavior: allow-discrete} ile etkinleştirebilirsiniz. Ancak transition kısaltmasıyla özgünlük çakışmalarını önlemek için bu özelliğin CSS'nizin sonunda yer aldığından emin olun.

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 kullanın. Bu, "açılmadan önce" durumudur (animasyon yaptığınız yerdir).

/*  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);
}

Önemli: @starting-style içindeki kurallar, şelaleye yeni bir sıralama getirmeden diğer herhangi bir gruplanmış stil kuralı gibi kademeli olarak güncellenir. Yani, @starting-style içindeki beyanlar ve kurallar, bunların dışındakileri kazanmak zorunda değildir. Başlangıç stillerinin üzerine yazılmaması için @starting-style kuralını, başlangıç stili olmayan bildirimlerin ardından yerleştirin.

Artık şu YAPILACAKLAR listesi öğeleri için hem giriş hem de çıkış durumunuz var:

adlı kaleme göz atın.

Üst katmana doğru ve üst katmandan çıkmak için öğelerin animasyonunu oluşturma

Üst katmana gelen ve üst katmandan çıkan öğelere animasyon eklemek için, tarayıcıya nereden animasyon ekleyeceğini belirtmek için "açık" durumda @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.

Bir 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;
}

belgesine bakın.

overlay mülkü

Son olarak, üst katmandaki bir popover veya dialog öğesini karartmak için geçiş listenize overlay özelliğini 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 özelliğini diğer özelliklerle birlikte canlandırmak için geçişe veya animasyona overlay ekleyin ve animasyon sırasında üst katmanda kalmasını sağlayın. Bu şekilde çok daha akıcı 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ış geçişlerini sorunsuz bir şekilde kontrol etmenize 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'ye öğe ekleyip çıkarmak gibi DOM değişiklikleri yapıyorsanız sorunsuz animasyonlar için bir diğer harika çözüm de görüntüleme geçişleridir. Aşağıda, görüntüleme 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ünüm geçişleri geçişi yönetir. Görüntüleme geçişi aşağıdaki gibi 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.

belgesine göz atın.

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.

belgesine bakı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:

• Pop-up API ile tanışın
• css-transitions-2 spec
• css-position-4 spec

Not: Bu yayın, iç içe yerleştirilmiş @starting-style kuralları için doğru sırayı kullanacak şekilde 13.09.2024 tarihinde güncellendi. Chrome 130'dan itibaren @starting-style kuralları, giriş sonrası durum (normal) beyanlarından sonra yerleştirilmelidir.