آزمایشگاه‌های ری‌اکت (بخش دوم)

14  

15  );

16 }

توجه داشته باشید که به دلیل محدودیت این مقاله صرفاً کدهای App.js در اینجا آمده‌اند و برای مشاهدهٔ سایر کدها ازجمله موارد زیر از طریق لینک پایین مقاله به خود آن مراجعه کنید.

Details.js, Home.js, Layout.js, Videos.js, router.js, animations.css

برای بررسی کامل‌تر سبک‌سازی در بنگرید به مطلب سبک‌سازی انتقال نما.

ترنزیشن عناصر مشترک در ری‌اکت

وقتی دو صفحه شامل یک عنصر یکسان باشند، اغلب لازم است آن را از یک صفحه به صفحهٔ دیگر با انیمیشن منتقل کنید. برای انجام این کار می‌توانید یک نام منحصربه‌فرد به <ViewTransition> اضافه کنید:

حال تصویر کوچک نشان‌دهندهٔ ویدیو بین دو صفحه متحرک‌سازی می‌شود:

1 import { useState, unstable_ViewTransition as ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";

2

3 export function Thumbnail({ video, children }) {

4  // Add a name to animate with a shared element transition.

5  // This uses the default animation, no additional css needed.

6  return (

7   

8    

9        aria-hidden="true"

10        tabIndex={-1}

11        className={`thumbnail ${video.image}`}

 12     >

13        {children}

14     

15   

16  );

17 }

18

19 export function VideoControls() {

20  const [isPlaying, setIsPlaying] = useState(false);

21

22  return (

23   

24      className="controls"

25      onClick={() =>

26        startTransition(() => {

27          setIsPlaying((p) => !p);

28        })

29      }

30    >

31      {isPlaying ? : }

32   

33  );

34 }

35

36 export function Video({ video }) {

37  const { navigate } = useRouter();

38

39  return (

40   

55     

56   

57  );

58 }

به‌طور پیش‌فرض ری‌اکت نامی منحصر‌به‌فرد برای هر عنصری که در ترنزیشن فعال می‌شود اختصاص می‌دهد و این کار را به‌طور خودکار انجام می‌دهد. بنگرید به مطلب مربوط به نحوهٔ عملکرد . وقتی ری‌اکت ترنزیشنی را ببیند که در آن با یک اسم پاک‌شده است و سپس آن با همان اسم در اضافه شده است، عناصر مشترک را فعال خواهد کرد. برای اطلاعات بیشتر در این مورد بنگرید به اسناد مربوط به متحرک‌سازی عنصر مشترک.

انیمیشن‌سازی در ری‌اکت براساس دلیل

برخی اوقات شما می‌خواهید عناصر براساس چگونگی فعال‌شدن آنها به‌شیوه‌های مختلف متحرک‌سازی شوند. ما در مثال خودمان یک API جدید به نام addTransitionType اضافه کرده‌ایم تا دلیل ترنزیشن را مشخص کنیم.

function navigate(url) {

  startTransition(() => {

    // Transition type for the cause "nav forward"

    addTransitionType('nav-forward');

    go(url);

  });

}

function navigateBack(url) {

  startTransition(() => {

    // Transition type for the cause "nav backward"

    addTransitionType('nav-back');

    go(url);

  });

}

شما می‌توانید براساس نوع ترنزیشن، انیمیشن‌های سفارشی را از طریق پراپ‌ها به بدهید. در اینجا ما ترنزیشن عنصر مشترک را به سربرگ همان صفحهٔ نمایش ویدیوها در مثال‌مان اضافه کرده‌ایم:

  name="nav"

  share={{

    'nav-forward': 'slide-forward',

    'nav-back': 'slide-back',

  }}>

  {heading}

در اینجا ما یک ویژگی اشتراک‌گذاری پراپ برای تعریف نحوهٔ متحرک‌سازی براساس نوع انتقال یا ترنزیشن ارسال می‌کنیم. وقتی ترنزیشن اشتراک‌گذاری از nav-forward فعال می‌شود، کلاس انتقال نمای slide-forward اعمال می‌شود. وقتی از nav-back فعال می‌شود، انیمیشن slide-back فعال می‌شود. این انیمیشن‌ها را در CSS این‌گونه تعریف می‌کنیم:

::view-transition-old(.slide-forward) {

    /* when sliding forward, the "old" page should slide out to left. */

    animation: ...

}

::view-transition-new(.slide-forward) {

    /* when sliding forward, the "new" page should slide in from right. */

    animation: ...

}

::view-transition-old(.slide-back) {

    /* when sliding back, the "old" page should slide out to right. */

    animation: ...

}

::view-transition-new(.slide-back) {

    /* when sliding back, the "new" page should slide in from left. */

    animation: ...

}

حال ما می‌توانیم سربرگ را با تصویر بندانگشتی براساس نوع ناوبری متحرک‌سازی کنیم:

1 import {unstable_ViewTransition as ViewTransition} from 'react'; import { useIsNavPending } from "./router";

2

3 export default function Page({ heading, children }) {

4  const isPending = useIsNavPending();

5  return (

6   

29  );

30 }

متحرک‌سازی مرزهای Suspense در ری‌اکت

Suspense نیز ترنزیشن‌های نما را فعال می‌کند. برای متحرک‌سازی محتواهای جایگزین می‌توانیم Suspense را با بسته‌بندی کنیم.

  }>

با افزودن آن محتواهای جایگزین به‌طور متقاطع در محتوای قبلی محو می‌شود. روی یکی از ویدیوها کلیک کنید و اطلاعات ویدیو را به‌صورت متحرک در زیر مشاهده کنید.

1 import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";

2

3 function VideoDetails({ id }) {

4  // Cross-fade the fallback to content.

5  return (

6    

 7     }>

 8        

 9    

 10  

 11 );

12 }

13

14 function VideoInfoFallback() {

15  return (

16   

20  );

21 }

22

23 export default function Details() {

24 const { url, navigateBack } = useRouter();

25  const videoId = url.split("/").pop();

26  const video = use(fetchVideo(videoId));

27

28  return (

29   

30      heading={

31       

 32         className="fit back"

33          onClick={() => {

34            navigateBack("/");

35          }}

36        >

37          Back

38        

39      }

40    >

41     

47   

48  );

49 }

50

51 function VideoInfo({ id }) {

52 const details = use(fetchVideoDetails(id));

53  return (

54   

 58 );

59 }

همچنین می‌توان با استفاده از exit در fallback و enter در محتوا انیمیشن‌های سفارشی را وارد کنیم.

  fallback={

  }

> 

به شیوهٔ زیر با css می‌توانیم slide-down و slide-up را تعریف کنیم.

::view-transition-old(.slide-down) {

  /* Slide the fallback down */

  animation: ...;

}

::view-transition-new(.slide-up) {

  /* Slide the content up */

  animation: ...;

}

حال محتوای Suspense در انیمیشنی با حالت کشویی جایگزین fallback می‌شود:

1 import { use, Suspense, unstable_ViewTransition as ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";

2

3 function VideoDetails({ id }) {

4  return (

5   

6      fallback={

 7       // Animate the fallback down.

8       

 9        

 10      

11      }

12    >

13      {/* Animate the content up */}

14     

15       

16     

17   

18  );

19 }

20

21 function VideoInfoFallback() {

22  return (

23    <>

24     

25     

26   

27  );

28 }

29

30 export default function Details() {

31  const { url, navigateBack } = useRouter();

32  const videoId = url.split("/").pop();

33  const video = use(fetchVideo(videoId));

34

35  return (

36   

37      heading={

38       

39          className="fit back"

40          onClick={() => {

41            navigateBack("/");

42          }}

 43       >

 44         Back

 45      

 46     }

47    >

48     

54   

55  );

56 }

57

58 function VideoInfo({ id }) {

59  const details = use(fetchVideoDetails(id));

60  return (

 61   <>

62     

{details.title}

63     

{details.description}

64   

65  );

66 }

متحرک‌سازی لیست‌ها در ری‌اکت

می‌توانید با استفاده از لیست‌ آیتم‌ها را که وقتی دوباره سفارش داده می‌شوند متحرک‌سازی کنید و به شکل فهرستی قابل جستجو از آیتم‌ها درآورید.

ما می‌توانیم برای فعال‌سازی ViewTransition از useDeferredValue استفاده کنیم.

const [searchText, setSearchText] = useState(‘’);

const deferredSearchText = useDeferredValue(searchText);

const filteredVideos = filterVideos(videos, deferredSearchText);

حال آیتم‌ها همزمان با تایپ شما در نوار جستجو متحرک می‌شوند:

1 import { useId, useState, use, useDeferredValue, unstable_ViewTransition as ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";

2

3 function SearchList({searchText, videos}) {

4  // Activate with useDeferredValue ("when")

5  const deferredSearchText = useDeferredValue(searchText);

6  const filteredVideos = filterVideos(videos, deferredSearchText);

7  return (

8   

21  );

22 }

23

24 export default function Home() {

25  const videos = use(fetchVideos());

26  const count = videos.length;

27  const [searchText, setSearchText] = useState('');

28 

29  return (

30    {count} Videos}>

 31    

32     

33   

34  );

35 }

36

37 function SearchInput({ value, onChange }) {

38  const id = useId();

39  return (

40   

57  );

58 }

59

60 function filterVideos(videos, query) {

61  const keywords = query

62    .toLowerCase()

63    .split(" ")

64    .filter((s) => s !== "");

65  if (keywords.length === 0) {

66    return videos;

67  }

68  return videos.filter((video) => {

69    const words = (video.title + " " + video.description)

70      .toLowerCase()

71      .split(" ");

72    return keywords.every((kw) => words.some((w) => w.includes(kw)));

73  });

74 }

نتیجهٔ نهایی اینکه با اضافه‌کردن چند کامپوننت <ViewTransition> و چند خط CSS توانستیم تمام انیمینش‌هار بالا را به نتیجهٔ نهایی در ری‌اکت اضافه کنیم. به همین دلیل ما از وضعیت فعلی View Transitions بسیار راضی هستیم و فکر می‌کنیم برنامه‌هایی که با آن می‌سازید با این به‌روزرسانی‌ها ارتقا می‌یابند. این به‌روزرسانی‌ها امروز در کانال اسناد منتشرشدهٔ ری‌اکت آماده هستند تا آنها را امتحان کنید.

در ادامه دستور محوشدن آهسته را حذف می‌کنیم و به نتیجهٔ نهایی نگاهی می‌اندازیم.

1 import {unstable_ViewTransition as ViewTransition} from 'react'; import Details from './Details'; import Home from './Home'; import {useRouter} from './router';

2

3 export default function App() {

 4 const {url} = useRouter();

5

6  // Animate with a cross fade between pages.

7  return (

8   

9      {url === '/' ? :