Şimdi Baseline'da: Giriş efektlerini canlandırma

Una Kravets

Giriş ve çıkış efektleri için dört yeni CSS özelliği gönderisinde, Chrome'da kullanıma sunulan bazı yararlı özellikler paylaşıldı. Şimdi, bu özelliklerden ikisi olan @starting-style ve transition-behavior: allow-discrete, Firefox 129'un kullanıma sunulmasıyla birlikte "Yeni Kullanıma Sunuldu" Temel özelliği haline gelmiştir. Artık öğeler için giriş animasyonu efektleri oluşturabilirsiniz. Buna, display: none uygulamasından ve üst katmana animasyon eklemek için de dahildir.

@starting-style ile giriş efektlerini ayarlama

@starting-style kuralı, sayfada oluşturulmadan önce bir öğedeki ilk stilleri tanımlar. Bu, display: none ürününden animasyon eklenen öğeler için animasyon kullanılacakları bir durum gerektiğinden, bu öğeler için gereklidir.

@starting-style öğesini, CSS'deki diğer kurallarda olduğu gibi öğenin stillerini içine yerleştirerek kullanın. Örneğin, <dialog> ile dialog[open] stillerini bir @starting-style kuralına yerleştirin. Bunlar, iletişim kutusu açılmadan önce kullanılan stillerdir.

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

allow-discrete ile ayrı animasyonları etkinleştirme

İletişim kutuları ve pop-up'lar gibi display: none ürününden animasyonlu öğeler için giriş animasyonlarını desteklemek üzere gereken ikinci şey, ayrı özelliklerin animasyonunu desteklemek üzere yeni bir animasyon modunu etkinleştirmektir. Ayrık özellikler, değerler arasında ara değer atanamayan özelliklerdir. Bunları açma/kapatma düğmesi gibi düşünebilirsiniz. display, visibility, mix-blend-mode (özelliğin farklı bir değer veya farklı bir değer olduğu tüm özellikler) buna örnek olarak verilebilir. Bu yeni animasyon modunda, tarayıcı artık değerlerin bir geçişin% 0 noktası yerine% 50 noktasında değiştirilmesini desteklemektedir.

display: none ve visibility: hidden öğelerinde giriş efektlerini canlandırmak için aşağıdaki iki yöntemden birini kullanın:

• allow-discrete değerine sahip transition-behavior bağımsız özelliği.
• Geçişteki kısaltmanızdaki allow-discrete değeri.

transition-behavior uygulamak, transition kısaltması da dahil olduğundan ikinci yöntemi öneririz. transition-behavior: allow-discrete öğesini geçiş, zamanlama ve yumuşak geçiş işlevlerini uyguladığınız geçiş kısaltmasından önce uygularsanız tarayıcı transition-behavior yönergesini yoksayar.

Bunu kısaltma şeklinde kullanırsanız, ayrı animasyonlar gerektiren belirli özelliklere sadece allow-discrete anahtar kelimesini uygulamanız gerekir. Bu, hem translate hem de display özelliğini geçiren, ancak display özelliğine yalnızca allow-discrete anahtar kelimesini uygulayan aşağıdaki CSS'de gösterilmektedir.

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

Demo: her şeyi bir araya getirme

Bu özelliklerin kullanılması, özellikle <dialog> öğesi veya popover özelliğini kullanan bileşenler gibi üst katman öğeleri için yararlıdır. Aşağıdaki örnekte, bir <dialog> öğesi, görüntü alanının alt kısmından (başlangıçta ekran dışında 100 vh dikey çevirmeyle başlayarak) görüntü alanının ortasına canlandırılarak <dialog> açıkken çeviri kaldırılır.

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

Aynı zamanda kısa süre önce kullanıma sunulan bir temel özellik olan CSS iç içe yerleştirme ile bunu daha kısa ve öz yazabilirsiniz.

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}

Sonuç

Baseline'da böyle bir ilerleme olduğunu görmek heyecan verici ve en azından bu unsurlar için ilerlemeye devam eden güzel bir geliştirme. Bu giriş efekti özellikleri olmadan, en üst katmanda veya display: none stilinde gösterilen öğeler, bugün olduğu gibi sayfanızda geçiş olmadan görünecektir.

Çıkış efektlerinin kademeli olarak iyileştirilmiş bir şekilde nasıl ekleneceğini öğrenmek için "Sorunsuz giriş ve çıkış animasyonları için dört yeni CSS özelliği" başlıklı makaleye göz atın ve bu özellikler hakkında daha fazla bilgi edinmek için aşağıdaki doküman kaynaklarına göz atın:

• MDN'de@starting-style
• MDN'de geçiş-davranışı