next page transitions

لانتقال الصفحة التالية

تحولات الصفحات البسيطة والقابلة للتخصيص لتطبيقات next.js

العرض التوضيحي: https://next-page-transitions.now.sh/

ماذا تفعل هذه المكتبة بالنسبة لي؟

ببساطة ، يجعل من السهل إضافة انتقالات الصفحات إلى التطبيقات مع Next.js. قد تعمل مع أطر أخرى ، ولكن تم تصميمها حول مكون App الجديد والطريقة التي يتعامل بها jex.js. على وجه التحديد ، يحل مشكلة التأكد من تثبيت مكون صفحة واحدة فقط في وقت واحد وأن الصفحة التالية لم يتم تركيبها حتى تكمل تلك السابقة الرسوم المتحركة للخروج. كما أن لديها دعمًا مدمجًا لإظهار مؤشر التحميل إذا كان مكون صفحتك يتعين عليه تحميل البيانات قبل عرضه.

أمثلة

إذا كنت تفضل التعلم بالقدوة ، تحقق من دليل examples لبعض تطبيقات Next.js التي توضح كيفية استخدام هذه المكتبة.

ابدء

أولاً ، قم بتثبيت الحزمة:

 npm install --save next-page-transitions

بعد ذلك ، تأكد من أن تطبيقك يحتوي على مكون App مخصص ؛ إذا لم يكن الأمر كذلك ، فاتبع المثال على next.js readme لإنشاء واحد. ثم ، في طريقة عرض App الخاص بك ، قم بلف Component الصفحة في مكون PageTransition . سيكون عليك أيضًا تحديد فصول CSS الخاصة بك التي تحقق الرسوم المتحركة الانتقالية التي تريدها. للحفاظ على هذه المكتبة بسيطة ولأخذ في الاعتبار مجموعة واسعة من الطرق التي ينتجها الأشخاص ويستهلكون CSS ، فإنها لا تقدم أي أنماط مدمجة وليس لها أي رأي معين حول كيفية انتهاء الأنماط على صفحتك. المثال أدناه لديه انتقال بسيط يتلاشى الصفحات داخل وخارج.

 import App , { Container } from 'next/app'
import React from 'react'
import { PageTransition } from 'next-page-transitions'

export default class MyApp extends App {
  static async getInitialProps ( { Component , router , ctx } ) {
    let pageProps = { }

    if ( Component . getInitialProps ) {
      pageProps = await Component . getInitialProps ( ctx )
    }

    return { pageProps }
  }

  render ( ) {
    const { Component , pageProps , router } = this . props
    return (
      < Container >
        < PageTransition timeout = { 300 } classNames = "page-transition" >
          < Component { ... pageProps } key = { router . route } />
        </ PageTransition >
        < style jsx global > { `
          .page-transition-enter {
            opacity: 0;
          }
          .page-transition-enter-active {
            opacity: 1;
            transition: opacity 300ms;
          }
          .page-transition-exit {
            opacity: 1;
          }
          .page-transition-exit-active {
            opacity: 0;
            transition: opacity 300ms;
          }
        ` } </ style >
      </ Container >
    )
  }
}

عندما تنتقل إلى صفحة جديدة ، سيتغير الدعامة key ، وسوف يكتشف مكون PageTransition ذلك. بدلاً من إلغاء تحديد الصفحة على الفور ، سيتم تطبيق فئة page-transition-exit على صفحة حول الصفحة لتهيئة انتقال "الخروج" ، ثم سيتم تطبيق فئة page-transition-exit-active وكذلك لبدء الانتقال. هذا مشابه جدًا لكيفية قيام مكتبة مجموعة React-Rantsition More بأشياء. بعد أن تم .page-transition-enter الصفحة السابقة ، يتم تثبيت الصفحة الجديدة وسيتم تطبيق زوج مماثل من الفصول الدراسية page-transition-enter-active . تتكرر هذه العملية في كل مرة يتم فيها التنقل في صفحة جديدة.

ملاحظة : في الإصدارات السابقة من next-page-transitions ، لم يكن من الضروري تحديد الدعامة key على أطفال PageTransition . ومع ذلك ، لجعل العمل الساخن لإعادة تحميل العمل بشكل صحيح ، كان من الضروري جعل هذا الدعامة مطلوبًا. نقل FOWARD ، الأطفال الذين لا يحددون دعامة key سيؤدي إلى تحذير في وحدة التحكم. في المستقبل ، قد يصبح هذا خطأ في وقت التشغيل.

دعم دخول التأخير

لنفترض أن لديك صفحة تحتاج إلى تقديم طلب شبكة قبل أن تتمكن من عرض محتواه. يمكن أن تجعل الصفحة نفسها تعرض دورًا في التحميل حتى يصبح جاهزًا للذهاب ، ولكن بعد ذلك تفقد الرسوم المتحركة الجميلة للصفحة التي قضيتها طوال الوقت في الإتقان. لحسن الحظ ، تجعل هذه المكتبة من السهل التعامل مع هذه الحالة.

إذا قمت بإضافة pageTransitionDelayEnter = true لمكون صفحتك ، فسيتم تمرير صفحتك دعامة رد اتصال خاصة يمكنك استخدامها للإشارة إلى أن كل شيء قد انتهى من التحميل. في غضون ذلك ، سيتم تركيب صفحتك ، ولكن لن يتم تشغيل انتقال Enter بعد ، وسيتم عرض مؤشر تحميل من اختيارك في مكانه. عندما تتصل بدعوة رد الاتصال ، سيتم إخفاء Spinner Loading ، وستكون صفحتك متحركة في مكانها! بشكل افتراضي ، يتم تمرير رد الاتصال عبر pageTransitionReadyToEnter Prop ، ولكن يمكن تحديد ذلك عن طريق تعيين loadingCallbackName Prop على مكون PageTransition الخاص بك.

ملاحظة: تأكد من null المكون الخاص بك من وظيفة render() حتى تنتهي من تحميل محتواه وأنه جاهز للرسوم المتحركة. ستظل صفحتك في شجرة مكون React أثناء تحميلها!

"لكن طلبات شبكتي عادة ما تكون سريعة!" ، ستقول. "عادة ما لا يأخذون بضع مئات من المللي ثانية فقط ، ولا أريد أن أومض مؤشر تحميل على الشاشة لفترة قصيرة من الزمن!" يمكن لهذه المكتبة التعامل مع هذه الحالة أيضًا. إذا قمت بتحديد دعامة loadingDelay ، فلن يتم عرض مؤشر التحميل حتى انقضت الكثير من الوقت. إذا كان المكون جاهزًا للدخول قبل ذلك ، فلن يتم عرض مؤشر التحميل أبدًا ، مع الحفاظ على نظافة UX ونظيفة. ومع ذلك ، إذا كان المكون الخاص بك يستغرق وقتًا طويلاً ، فسيتم عرض مؤشر التحميل حتى يصبح المكون جاهزًا.

"هذا يبدو نوعًا ما مثل مفهوم العنصر النائب من هذا الحديث عن الشعب. نعم ، نعم يفعل! كان هذا مصدر إلهام لهذه الميزة.

إليك مكون مثال يحاكي طلب الشبكة مع مهلة:

 class About extends React . Component {
  static pageTransitionDelayEnter = true

  constructor ( props ) {
    super ( props )
    this . state = { loaded : false }
  }

  componentDidMount ( ) {
    this . timeoutId = setTimeout ( ( ) => {
      this . props . pageTransitionReadyToEnter ( )
      this . setState ( { loaded : true } )
    } , 2000 )
  }

  componentWillUnmount ( ) {
    if ( this . timeoutId ) clearTimeout ( this . timeoutId )
  }

  render ( ) {
    if ( ! this . state . loaded ) return null
    return < div > Hello, world! </ div >
  }
}

افترض للحظة أن لديك مكونًا Loader يجعل مؤشر تحميل غزل لطيف. سيتعين عليك إخبار مكون PageTransition الذي تريد استخدامه هذا المكون ، والوقت الذي تريد الانتظار حتى عرض مؤشر الشبكة:

 <PageTransition
  timeout={300}
  classNames="page-transition"
  loadingComponent={<Loader />}
  loadingDelay={500}
  loadingTimeout={{
    enter: 400,
    exit: 0,
  }}
  loadingClassNames="loading-indicator"
>
  <Component {...pageProps} key={router.route} />
</PageTransition>

سيتعين عليك أيضًا إضافة أنماط إذا كنت تريد أن يتم تشغيل مؤشر التحميل على الشاشة. إذا كنت تريد أن تظهر/تختفي دون أي رسوم متحركة ، فيمكنك إضافة loadingTimeout={0} وإلغاء خاصية loadingClassNames .

تحقق من تطبيق delayed-enter في examples للحصول على مثال كامل على شكل هذا. ستنتظر صفحة "about" ( pages/about.js ) ثانيتين قبل عرض محتواه ، وفي هذه الأثناء ، سيتم عرض المكون في components/Loader.js . العب مع مختلف التأخير لاكتساب شعور أعمق بكيفية عمل هذا المكون.

الدعائم PageTransition

• classNames : يحدد أسماء الفصول التي سيتم تطبيقها على Wrapper Page لقيادة الرسوم المتحركة لانتقال الصفحة. مماثلة لدعم classNames لمكون CSSTranstition الخاص react-transition-group . ومع ذلك ، لاحظ أنه يتم دعم شكل سلسلة هذا الدعامة فقط في الوقت الحاضر. لاحظ أيضًا أن هذه المكتبة لا تحتوي على حالة "تظهر" منفصلة ؛ هناك حاجة فقط إلى فصول "إدخال" و "خروج".
• tag : يحدد العلامة أو المكون الذي سيتم استخدامه لتقديم غلاف الصفحة. سيتلقى هذا العنصر دعامة أسماء classNames . يعد هذا مفيدًا إذا كنت ترغب في استخدام الترميز الدلالي ، على سبيل المثال ، إذا كنت ترغب في تقديم Wrapper Page كما هو main ، أو إذا كنت بحاجة إلى تخصيص تصميم أو سلوك غلاف الصفحة.
• timeout : يحدد مهلة الرسوم المتحركة لانتقال الصفحة. مماثل لدعوة timeout لمكون CSSTranstition الخاص react-transition-group .
• loadingComponent : عنصر رد فعل ليتم عرضه أثناء
• loadingDelay : مدة الانتظار قبل إظهار مؤشر التحميل ، بالمللي ثانية. إذا انتهت صفحة ما قبل هذا المدة ، فلن يتم عرض مكون التحميل أبدًا. الإعدادات الافتراضية إلى 500 مللي ثانية.
• loadingCallbackName : يحدد اسم الدعامة التي ستتلقى صفحتك للاتصال بها عند الانتهاء من التحميل. الإعدادات الافتراضية إلى pageTransitionReadyToEnter
• loadingTimeout : مماثل لدعوة timeout لمكون CSSTranstition الخاص بـ react-transition-group . إذا تم تعيين هذا الدعامة على 0 ، فلن يتم تحريك مؤشر التحميل على الشاشة.
• loadingClassNames : يحدد أسماء الفصول التي سيتم تطبيقها على مكون التحميل إذا تم تحديد واحد. مماثلة لدعم classNames لمكون CSSTranstition الخاص react-transition-group .
• monkeyPatchScrolling : افتراضيًا ، سيتم تمرير مكون Link NEXT إلى الجزء العلوي من الصفحة كلما تم النقر عليه ؛ هذا يمكن أن يكون له تأثير غير مرغوب فيه عندما تنقل الصفحة. إذا تم ضبط هذا الدعامة على true عند تثبيت المكون ، فسيتم تشغيل window.scrollTo على قرد بحيث يمكن تعطيل التمرير البرمجي أثناء انتقال الصفحة. الافتراضيات إلى خطأ ، حيث يجب الاشتراك في هذا السلوك المحتمل.
• skipInitialTransition : يحدد ما إذا كان سيتم حذف انتقال الصفحة على Mount First. إذا كنت ترغب في الحصول على انتقالات فقط بين الصفحات ، وليس في تحميل الصفحة الأولى ، قم بتعيين skipInitialTransition إلى true . بشكل افتراضي ، تم تعيين skipInitialTransition على false .

المساهمة

PRS موضع ترحيب! قبل العمل على العلاقات العامة وتقديمها ، يرجى تقديم مشكلة تصف الميزة التي تريد إنشاءها. قد يكون خارج نطاق هذا المشروع ، أو قد يعمل المشرف عليه بالفعل.