مشاهده Transitions در Astro

شناسهٔ خبر: 445666 - تاریخ: ژانویه 24, 2024

این مقدمه برای مشاهده انتقال‌ها در Astro از Unleashing the Power of Astro که اکنون در SitePoint Premium موجود است، مستثنی است.

View Transitions API یک راه راحت برای ایجاد انتقال متحرک بین حالت‌های مختلف DOM در حالی که همزمان محتوای DOM را در یک عملیات به‌روزرسانی می‌کند، ارائه می‌کند. دستیابی به این امر به طور سنتی در وب دشوار بوده است، اما با این API جدید، انتقال ها می توانند به روشی نسبتاً آسان انجام شوند. مطالعات نشان داده اند که استفاده از View Transitions API منجر به عملکرد سریعتر سایت می شود.

Astro از انتقال‌های مشاهده خارج از جعبه، با مکانیزم بازگشتی داخلی برای مرورگرهایی که در حال حاضر از API پشتیبانی نمی‌کنند، پشتیبانی می‌کند.

راه‌حل خارج از جعبه از انیمیشن‌های داخلی، انیمیشن‌ها برای پیمایش رو به جلو و عقب، و پشتیبانی خودکار برای دسترسی (از طریق prefers-reduced-motion ) از جمله موارد دیگر پشتیبانی می‌کند.

بیشتر بخوانید

تصاویر دیده نشده‌ از بازدید سینماگران از سالمندان کهریزک در سال ۷۵

یکی از بهترین راه‌ها برای نشان دادن انتقال‌های مشاهده، استفاده از یک عنصر ویدیویی است که وضعیت خود را بین انتقال‌های صفحه حفظ می‌کند. (توجه داشته باشید که ما همچنین می‌توانیم بین مؤلفه‌هایی که از دستورالعمل‌های client:* استفاده می‌کنند، ادامه دهیم.) نمونه‌ای از آن در ویدیوی زیر نشان داده شده است.

[محتوای تعبیه شده]

بیایید فرض کنیم که یک مؤلفه <Video /> با این محتوا داریم:

 --- // src/components/Video const src = 'https://res.cloudinary.com/tamas-demo/video/upload/f_auto,q_auto/imagecon/ship.mp4'; const { autoplay = false, controls = true, loop = false } = Astro.props; --- <video {controls} {autoplay} {loop} transition:persist> <source {src} /> </video>

در کد بالا، ما یک ویدیو از کلودینری می گیریم. علاوه بر این، ما اجازه می‌دهیم ویدیو به‌طور خودکار پخش شود و پس از اتمام آن، حلقه (از اول شروع شود)، و دکمه‌های کنترلی را برای کاربر فراهم می‌کنیم. این تنظیمات توسط آپشن های ارسال شده به این مؤلفه ویدیویی تعیین می‌شوند و اگر این ویژگی‌ها ارائه نشده باشند، از مقادیر پیش‌فرض استفاده می‌شود. سپس این متغیرها به عناصر <video> و <source> HTML اضافه می شوند.

لطفاً دستورالعمل transition:persist را مورد توجه قرار دهید. با این دستورالعمل، وضعیت پخش‌کننده ویدیو را بین انتقال‌ها حفظ می‌کنیم: در حین پیمایش به صفحه بعدی، ویدیو همچنان پخش می‌شود، در حالی که سایر قسمت‌های صفحه محتوای به‌روز شده را نشان می‌دهند. ما می‌توانیم از این مؤلفه در هر دو صفحه index.astro و about.astro استفاده کنیم:

دیگر اخبار

جانی آیو ظاهراً برای توسعه یک سخت‌افزار هوش مصنوعی جدید، با OpenAI همکاری می‌کند

 // src/pages/index.astro --- import Video from '../components/Video.astro'; --- <!-- some other HTML --> <Video />

در نهایت، ما باید انتقال صفحه را فعال کنیم، که می توانیم در هر صفحه یا به صورت سراسری برای کل پروژه انجام دهیم. با فرض اینکه یک نوع فایل طرح بندی داریم، می توانیم به راحتی آن را با وارد کردن ViewTransitions از astro:transitions فعال کنیم:

 // src/layouts/Layout.astro --- import { ViewTransitions } from 'astro:transitions'; --- <html lang="en"> <head> <title>My site!</title> <ViewTransitions /> </head> <body> <slot /> </body> </html>

به طور خلاصه، API آزمایشی View Transitions انتقال بصری بین صفحات یا عناصر مختلف را از طریق شبه عناصر CSS، جاوا اسکریپت و عکس‌های فوری از حالت‌های قبلی و فعلی DOM ساده می‌کند. این یک فرصت جدید برای بهبود عملکرد درک شده از یک صفحه، به حداقل رساندن اتکا به جاوا اسکریپت سفارشی و CSS پیچیده است.

آیا می‌خواهید درباره Astro، چارچوب مدرن همه‌کاره برای ساختن وب‌سایت‌های سریع‌تر و متمرکز بر محتوا، اطلاعات بیشتری کسب کنید؟ Unleashing the Power of Astro را که اکنون در SitePoint Premium موجود است، تحلیل کنید.

خبرکاو