Öğeleri ekran üzerinde canlandırmak için bir süredir projelerimde aynı animasyon modelini kullanıyorum. En basit biçiminde, sıfır opaklıkla stillendirilmiş bir öğeye sahip olursunuz, ardından stili bir saniyelik CSS geçişiyle bir donukluğa sahip olacak şekilde değiştirirsiniz. Geçiş yapan diğer özellikleri ekleyerek, süreyi değiştirerek, bir gecikme ekleyerek veya özel yumuşatma ayarlayarak bunun üzerine eklemeler yapabiliriz. projelerime hızlı bir şekilde animasyon efektleri eklemek istediğimde kullandığım, yeniden kullanılabilir bir React bileşenidir. Basit bir yardımcı bileşen olan bu bileşen, minimum çabayla akıcı, göz alıcı animasyonlar oluşturmak için CSS Animasyonunu Tailwind sınıflarıyla birleştirir. <AnimateIn/>, Gelin nasıl kullanıldığına bir göz atalım. Bileşeni içe aktardıktan sonra, Tailwind sınıflarıyla ve durumlarını tanımlayın. Animasyonun canlandığını görmek için hedef öğeyi içine sarın. from to <AnimateIn/> import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn> Burada, başlık ve alt başlıkta animasyon oluşturmak için daha fazla özellik kullanan, biraz daha karmaşık bir örnek verilmiştir. import AnimateIn from '../animation/AnimateIn'; <header> <AnimateIn as="h1" from="opacity-0 translate-y-32" to="opacity-100 translate-y-0" delay={500} duration={300} className="text-4xl" style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}} > My Big Headline </AnimateIn> <AnimateIn as="h2" from="opacity-0 scale-0" to="opacity-100 scale-100" delay={800} duration={500} className="text-lg" > This is a subtitle below the headline </AnimateIn> </header> Başlık örneğinde , yavaş yavaş açılmayla birleştirilmiş bir kaydırma efekti oluşturmak için kullanıldı. Her özelliğin animasyona nasıl katkıda bulunduğu aşağıda açıklanmıştır: <AnimateIn/> property: ayarını yaparak AnimateIn'e animasyonu bir öğesi olarak oluşturmasını söyleriz. as as="h1" <h1> ve özelliklerine: özelliği, başlığı ekran dışında başlatır ( , 32 birim aşağı taşır) ve görünmez ( ). özelliği daha sonra başlığı son konumuna getirir ( geri döner) ve tamamen görünür hale getirir ( ). from to from translate-y-32 opacity-0 to translate-y-0 opacity-100 özelliği: Animasyon herhangi bir gecikme olmadan hemen başlayacak şekilde ayarlanmıştır ve 300 ms kadar kısa bir süre boyunca çalışır. duration özelliği: yazı tipi boyutunu ayarlamak için Tailwind'in yardımcı sınıfını uygulayarak başlığın belirgin bir şekilde öne çıkmasını sağlar. className className="text-4xl" özelliği: Özel ( ) animasyona benzersiz bir kolaylık katarak ona sıçrama benzeri bir etki kazandırır. style transitionTimingFunction cubic-bezier(0.25, 0.4, 0.55, 1.4) Alt başlık, başlığı tamamlamak için farklı bir animasyon seti kullanarak tutarlı bir görsel akış oluşturur. property: Burada bileşeni altyazıya uygun bir öğesi olarak işler. as as="h2" <h2> ve : Altyazı sıfıra ( ) ve görünmezliğe ( ) ölçeklendirilmeye başlar, ardından doğal boyutuna ( ) ölçeklendirilir ve tamamen görünür hale gelir ( ). Yavaş yavaş açılmayla eşleştirilen bu ölçeklendirme efekti, animasyona derinlik katar. from to scale-0 opacity-0 scale-100 opacity-100 ve özellikleri: Altyazı da 800 ms'lik bir gecikmeden sonra başlar, böylece başlık tamamen canlandırıldıktan sonra başlar. Bu kademeli yaklaşım, her öğenin kendi odak anını almasını sağlar. delay duration özelliği: altyazının yazı tipi boyutunu ayarlayarak başlıktan daha küçük ancak yine de anlamlı olmasını sağlar. className className="text-lg" Neler olduğunu daha iyi anlamak için kaynak koduna bakalım: Github'daki <AnimateIn/> herhangi bir animasyon gerçekleşmeden önce animasyonun başlangıç noktası için sahneyi ayarlayan, bir veya daha fazla Tailwind yardımcı sınıf olması gereken özelliğiyle animasyon durumunu başlatmak için bir kancası kullanır. <AnimateIn/>, from useState Bileşendeki ilk kancası, azaltılmış hareket konusunda kullanıcı tercihlerine saygı göstermek içindir. medya sorgusunu dinleyerek animasyon davranışı kullanıcının sistem ayarlarına göre belirlenir. Azaltılmış hareket tercih edilirse animasyon tamamen atlanır ve animasyon durumu doğrudan özelliğine ayarlanarak erişilebilir bir deneyim sağlanır. useEffect (prefers-reduced-motion: reduce) to İkinci kancası, animasyon mantığının bulunduğu yerdir. Kullanıcı azaltılmış hareket için bir tercih belirtmemişse bileşen, animasyon durumunu başlangıçtaki son ve belirtilen gecikmeden sonra değere değiştiren bir zamanlayıcı ayarlar. Bu geçiş animasyonun görsel etkisini yaratır. useEffect from to Bu kancanın temizleme işlevi (return ifadesi), zamanlayıcıyı temizleyerek, bileşenin animasyon tamamlanmadan ayrılması gibi olası bellek sızıntılarını önler. işlev çağrısı, bileşenin işleme mekanizmasıdır. prop'a dayalı olarak dinamik olarak bir HTML öğesi oluşturur ve bileşenin farklı HTML öğeleri arasında kullanılmasına olanak tanır. , Tailwind'in yardımcı program sınıflarını, destek olarak iletilen özel ve geçerli animasyon durumunu birleştiren işlevi kullanılarak oluşturulur. Bu dinamik sınıf ataması, istenen stilleri ve geçişleri öğeye uygulayan şeydir. React.createElement as className className shadcn tarafından popüler hale getirilen cn Ek olarak, animasyon kapsayıcısındaki stil özelliklerini doğrudan ayarlamak için aktarılabilecek bir özelliği de vardır. desteğine göre ayarlanır, ancak kullanıcı azaltılmış hareketi tercih ederse akıllıca geçer ve bileşenin işlevselliğini korurken animasyonu etkili bir şekilde devre dışı bırakır. style transitionDuration duration 0ms Kendi projenizde kullanmak istiyorsanız ve zaten kullanıyorsa, o zaman ihtiyacınız olan her şeye zaten sahipsiniz, ve bileşenlerinize ekleyin. <AnimateIn/> shadcn AnimateIn.tsx'i indirin Aksi takdirde, yanı sıra, tailwind sınıflarını birleştirmek için yararlı bir de kurmak isteyeceksiniz. Tailwind'in yardımcı program olan mxcn Shadcn gibi <AnimateIn/> de uygulamalarınıza kopyalayıp yapıştırabileceğiniz ve ihtiyaçlarınıza göre özelleştirebileceğiniz yeniden kullanılabilir bir bileşen olarak tasarlanmıştır. Kod sizindir. Ayrıca, adresinde ile farklı animasyonlar oluşturmaya yönelik güzel bir demo sayfası hazırladım. animate-in.vercel.app <AnimateIn/> da yayınlandı Burada

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

Making security fun one episode at a time

Tailwind ve CSS ile Animasyonlar için React Utility Bileşeni Oluşturdum: AnimateIn

Çok uzun; Okumak

John Polacek

About Author

ETİKETLERİ ASIN

Languages

BU YAZI...

Tailwind ve CSS ile Animasyonlar için React Utility Bileşeni Oluşturdum: AnimateIn

Çok uzun; Okumak

John Polacek

About Author

ETİKETLERİ ASIN

Languages

BU YAZI...

İLGİLİ ÖYKÜLER