Will-change

will-change ile performans ipucu vermeyi öğrenirsin.

will-change ile performans ipucu

will-change özelliği tarayıcıya bir öğenin yakında nasıl değişeceğini söyler. Tarayıcı, o öğe için önceden bir kompozisyon katmanı (compositor layer) oluşturur ve animasyonu pürüzsüz yapar.

Örneğin .card { will-change: transform; } yazınca tarayıcı kartı ayrı bir katmana alır. Kart hareket ettiğinde yalnız composite çalışır; layout ve paint atlanır.

will-change kötüye kullanımı

will-change güçlü bir ipucudur ama her öğeye yazılmaz. Her will-change değeri yeni bir katman oluşturur; katmanlar bellek tüketir. Yüzlerce katman biriktirirse tarayıcı yavaşlar.

Doğru kullanım: animasyondan hemen önce ekle, bitince kaldır. Kalıcı will-change yalnızca sürekli dönen bir öğe gibi özel durumlarda mantıklıdır.

Uygulama will-change ile kart hover animasyonu hazırla

Aşağıdaki CSS'i tamamla. .card bildirimine will-change: transform ve transition: transform 0.2s ease ekle. .card:hover bildiriminde transform: scale(1.04) olsun.

Örnek çözümü göster

/* kart hover animasyonu */
.card {
  will-change: transform;
  transition: transform 0.2s ease;
}

.card:hover {
  transform: scale(1.04);
}

Kendini test et

will-change ne zaman kullanılır?
- Tüm öğelere, önlem için
- Sayfa yüklendiğinde, kalıcı olarak
- Yalnız estetik için, performans olmadan
- Animasyon öncesi, kısa süreli
Cevabı göster

Animasyon öncesi, kısa süreli — Doğru. will-change animasyon öncesi eklenir, bitince kaldırılır; kalıcı kullanım bellek tüketir.

will-change değerini yaz

.card {
  /* hover animasyonu için */
  will-change: ____;
}

Cevabı göster

.card {
  /* hover animasyonu için */
  will-change: transform;
}

will-change değerini anlamına eşle

transform

Hareket ve ölçekleme
opacity

Saydamlık değişimi
scroll-position

Kaydırma animasyonu
contents

İçerik değişimi
auto

Standart davranış

Sıradaki ders: Contain

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler