نصيحة
إذا كنت تحب هذه المكتبة ، فيرجى التفكير في دعم منشئها.
React Awesome Dext هي مكتبة لتطبيقات React المكتوبة في TypeScript تضيف كشف الرسوم المتحركة باستخدام واجهة برمجة تطبيقات Obsection Observer لاكتشافها عندما تظهر العناصر في منفذ العرض. يتم توفير الرسوم المتحركة داخليًا من خلال العاطفة وتنفيذها كرسوم متحركة CSS للاستفادة من تسارع الأجهزة.
لإضافة هذه الحزمة كاعتماد على تطبيقك ، ما عليك سوى التشغيل
npm install react-awesome-reveal @emotion/react --saveأو ، إذا كنت تستخدم الغزل:
yarn add react-awesome-reveal @emotion/reactأو ، إذا كنت تستخدم PNPM (كما أقترح بشدة):
pnpm add react-awesome-reveal @emotion/react تكشف تأثيرات الاستيراد من React Awesome إلى مكون React الخاص بك ، على سبيل المثال تأثير Fade :
import { Fade } from "react-awesome-reveal" ;ثم ببساطة لف المكونات التي تريد تحريكها:
< Fade >
< p > I will gently appear as I enter the viewport </ p >
</ Fade > التأثيرات المدعومة حاليًا هي Bounce ، Fade ، Flip ، Hinge ، JackInTheBox ، Roll ، Rotate ، Slide and Zoom . ارجع إلى وثائق animate.css للحصول على التفاصيل.
منذ الإصدار 3 ، يتم لف الرسوم المتحركة لباحث الانتباه من قبل مكون AttentionSeeker ، والذي يقبل دعامة يسمى effect الذي يحدد الرسوم المتحركة لتقديمها (الافتراضيات إلى "bounce” ). الآثار المدعومة هي: ”bounce" ، "flash" ، "headShake” ، " "heartBeat" ، " "jello” ، "pulse" ، "rubberBand" ، “shake” ، “shakeX" ، "shakeY” ، "swing” ، "tada" و “wobble” .
مرة أخرى ، ارجع إلى وثائق animate.css للحصول على التفاصيل.
يمكنك تمرير الدعائم التالية إلى مكونات الرسوم المتحركة لتخصيص السلوك:
| دعم | وصف | قيم | تقصير |
|---|---|---|---|
cascade | إذا تم تعيينه ، يتم تخصيص كل طفل من الرسوم المتحركة تلقائيًا تأخيرًا يأخذ في الاعتبار سابقتهم (الطفل i أدخله بعد i * delay * damping ميلي ثانية) - مفيد لعناصر قائمة الرسوم. | true أو false | false |
damping | العامل الذي يؤثر على التأخير الذي سيتم تعيين كل مكون متحرك في الرسوم المتحركة المتتالية. إذا كان damping = 1 ، فسيكون التأخير مساوياً لمدة الرسوم المتحركة ؛ إذا كان damping < 1 فسيكون التأخير أقل من مدة الرسوم المتحركة ؛ إذا كان damping > 1 ، فسيكون التأخير أكبر من مدة الرسوم المتحركة. | number | 0.5 (وهذا يعني أن التأخير سيكون نصف مدة الرسوم المتحركة) |
direction | أصل الرسوم المتحركة (عند الاقتضاء). | "down" "left" "right" "up" | undefined |
delay | حان الوقت للانتظار قبل بدء الرسوم المتحركة (بالميلي ثانية). | number | 0 |
duration | مدة الرسوم المتحركة (مللي ثانية). | number | 1000 |
fraction | ما مقدار العنصر الذي يجب أن يكون في إطار العرض قبل أن يتم تشغيل الرسوم المتحركة. | number بين 0 و 1 | 0 |
triggerOnce | يحدد ما إذا كان يجب تشغيل الرسوم المتحركة مرة واحدة فقط أو في كل مرة يدخل فيها عنصر/يخرج/يعيد إدخال منفذ العرض. | true أو false | false |
className | أسماء الفصل لإضافتها إلى عنصر الحاوية. | string | undefined |
style | الأنماط المضمنة لإضافتها إلى عنصر الحاوية. | React.CSSProperties | undefined |
childClassName | أسماء الفصل لإضافتها إلى عنصر الطفل. | string | undefined |
childStyle | الأنماط المضمنة لإضافتها إلى عنصر الطفل. | React.CSSProperties | undefined |
onVisibilityChange | تم تنفيذ رد الاتصال عندما يدخل العنصر أو يترك منفذ العرض. إذا تم تحريك أكثر من عنصر ، يتم استدعاء هذه الوظيفة في كل عنصر. | (inView: boolean, entry: IntersectionObserverEntry) => void | undefined |
لتشغيل الرسوم المتحركة فقط في المرة الأولى التي يدخل فيها العنصر إلى منفذ العرض:
< Slide triggerOnce >
< p > I will animate only the first time you see me </ p >
</ Slide > لربط الرسوم المتحركة متعددة ، قم بتعيين Prop cascade على true :
< Fade cascade >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > العب مع دعامة damping لتغيير التأخير الذي سيظهر به كل طفل تدريجياً:
< Fade cascade damping = { 0.1 } >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > بدءًا من الإصدار 3.2.0 ، يمكنك تحديد الرسوم المتحركة المخصصة! ما عليك سوى استيراد مكون Reveal (وهو التصدير الافتراضي للمكتبة - امنحه الاسم الذي تريده) وقم بتمريره دعامة keyframes :
import React from "react" ;
import Reveal from "react-awesome-reveal" ;
import { keyframes } from "@emotion/react" ;
const customAnimation = keyframes `
from {
opacity: 0;
transform: translate3d(-200px, -100px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
` ;
function CustomAnimation ( { children } ) {
return < Reveal keyframes = { customAnimation } > { children } </ Reveal > ;
} إذا لم يتم تمرير keyframes ، فإن الرسوم المتحركة المقدمة الافتراضية هي مدخل باهت من اليسار (أي ما يعادل <Fade direction="left">...</Fade> ).
يمكنك أيضًا تمرير هذه الدعائم Reveal :
cascadedampingdelaydurationfractiontriggerOnceclassName و childClassNamestyle و childStyleonVisibilityChangeمراقب التقاطع هو واجهة برمجة التطبيقات المستخدمة لتحديد ما إذا كان العنصر داخل منفذ العرض أم لا. دعم المتصفح جيد حقًا - مع إضافة دعم Safari في 12.1 ، تدعم جميع المتصفحات الرئيسية الآن مراقبي التقاطع أصليًا.
إذا كنت بحاجة إلى دعم المتصفحات القديمة ، فأضف polyfill لاتصالات API للمراقب التقاطع.
يمكنك إضافة polyfill مباشرة أو استخدام خدمة مثل polyfill.io لإضافتها عند الحاجة.
yarn add intersection-observerثم استيراده في تطبيقك:
import "intersection-observer" ;إذا كنت تستخدم WebPack (أو ما شابه ذلك) ، فيمكنك استخدام الواردات الديناميكية لتحميل polyfill فقط إذا لزم الأمر. يمكن للتنفيذ الأساسي أن يبدو مثل هذا:
/**
* Do feature detection, to figure out which polyfills needs to be imported.
**/
async function loadPolyfills ( ) {
if ( typeof window . IntersectionObserver === "undefined" ) {
await import ( "intersection-observer" ) ;
}
} للاطلاع على وثائق الإصدارات السابقة ، انتقل عبر العلامات السابقة في مستودع مشروع Github وقراءة ReadMe لهذا الإصدار المحدد.
تم ترخيص رمز مصدر المشروع بموجب ترخيص معهد ماساتشوستس للتكنولوجيا. أنت حر في توتر هذا المستودع ، وتعديل الكود ومشاركته واستخدامه على حد سواء للأغراض غير التجارية والتجارية.
