Arkadaşlar merhaba, son günlerde projelerimden birinde gece moduna geçiş için animasyonlu bir çözüm arıyorum. Çoğu sitede gördüğümüz gibi anlık bir renk değişimi yerine, kullanıcıya daha yumuşak bir geçiş sunmak istiyorum. Özellikle arka plan, butonlar ve metin renklerinin aynı anda animasyonla değişmesi gerekiyor. CSS transition ile basit bir çözüm denedim ama özellikle arka plan resimleri veya gradient kullanıldığında istediğim akıcılığı yakalayamadım. Bu konuda tecrübesi olan var mı? Hangi yöntemleri kullanıyorsunuz?
Ben şu an daha çok JavaScript ile class değiştirme üzerine gidiyorum. Kullanıcı bir toggle butonuna tıkladığında body'e "dark-mode" class'ı ekleyip çıkarıyorum. CSS'de de transition: background-color 0.5s, color 0.5s gibi bir tanım yapıyorum. Ama işin içine karanlık modda açılması gereken farklı görseller girince işler karışıyor. Mesela bir ikon seti kullanıyorsanız, gece modunda ikonların rengini değiştirmek yetmiyor, bazen tamamen farklı bir ikon göstermeniz gerekiyor. Bu durumda animasyonu nasıl yönetiyorsunuz? Yoksa illa bir framework katmanı mı eklemek gerekiyor?
Ayrıca performans konusunda da endişelerim var. Özellikle mobil cihazlarda bu tür animasyonlar takılma yapabiliyor. transition kullanırken özellikle opacity ve transform dışındaki property'lerin animasyonu performansı düşürüyor diye biliyorum. Siz hangi CSS özelliklerini animasyon için tercih ediyorsunuz? Belki de bu işi JavaScript ile requestAnimationFrame kullanarak halletmek daha mantıklı olabilir. Deneyen varsa fikirlerini duymak isterim, teşekkürler.
Ben şu an daha çok JavaScript ile class değiştirme üzerine gidiyorum. Kullanıcı bir toggle butonuna tıkladığında body'e "dark-mode" class'ı ekleyip çıkarıyorum. CSS'de de transition: background-color 0.5s, color 0.5s gibi bir tanım yapıyorum. Ama işin içine karanlık modda açılması gereken farklı görseller girince işler karışıyor. Mesela bir ikon seti kullanıyorsanız, gece modunda ikonların rengini değiştirmek yetmiyor, bazen tamamen farklı bir ikon göstermeniz gerekiyor. Bu durumda animasyonu nasıl yönetiyorsunuz? Yoksa illa bir framework katmanı mı eklemek gerekiyor?
Ayrıca performans konusunda da endişelerim var. Özellikle mobil cihazlarda bu tür animasyonlar takılma yapabiliyor. transition kullanırken özellikle opacity ve transform dışındaki property'lerin animasyonu performansı düşürüyor diye biliyorum. Siz hangi CSS özelliklerini animasyon için tercih ediyorsunuz? Belki de bu işi JavaScript ile requestAnimationFrame kullanarak halletmek daha mantıklı olabilir. Deneyen varsa fikirlerini duymak isterim, teşekkürler.