قفل گذارهای نمای را در SvelteKit 1.24 باز کنید

View Transitions API اخیراً دنیای توسعه وب را طوفانی کرده است و دلیل خوبی هم دارد. این فرآیند انیمیشن بین دو حالت صفحه را ساده می کند، که به ویژه برای انتقال صفحه مفید است.

با این حال، تا کنون نمی‌توانستید به راحتی از این API در یک برنامه SvelteKit استفاده کنید زیرا قرار دادن آن در مکان مناسب در چرخه عمر ناوبری دشوار بود. SvelteKit 1.24 جدید را به ارمغان آورد onNavigate قلاب چرخه حیات برای ایجاد یکپارچه سازی انتقال دید بسیار آسان تر – بیایید وارد آن شویم.

نحوه انتقال بین نماها

می‌توانید با تماس، انتقال از نمای را آغاز کنید document.startViewTransition و ارسال یک تماس برگشتی که به نوعی DOM را به روز می کند. برای اهداف امروز ما، SvelteKit DOM را در حین حرکت کاربر به روز می کند. پس از تکمیل تماس، مرورگر به حالت جدید صفحه منتقل می‌شود – به طور پیش‌فرض انتقال بین حالت قدیمی و جدید انجام می‌دهد.

documentvar document: Document
window.document returns a reference to the document contained in the window.
MDN Reference
.startViewTransition(method) Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback | StartViewTransitionOptions): ViewTransition
The startViewTransition() method of the Document interface starts a new same-document (SPA) view transition and returns a ViewTransition object to represent it.
MDN Reference
(async () => {
	await domUpdateconst domUpdate: () => Promisevoid>(); 
});

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

اگرچه در حال حاضر فقط در Chrome (و سایر مرورگرهای مبتنی بر Chromium) پیاده سازی شده است، WebKit نیز از آن پشتیبانی می کند. حتی اگر از یک مرورگر پشتیبانی‌نشده استفاده می‌کنید، این مرورگر یک کاندیدای ایده‌آل برای بهبود تدریجی است، زیرا ما همیشه می‌توانیم به ناوبری غیر متحرک برگردیم.

مهم است که توجه داشته باشید که انتقال نمایش یک API مرورگر است، نه SvelteKit. onNavigate تنها API مخصوص SvelteKit است که امروز از آن استفاده خواهیم کرد. هر چیز دیگری را می توان در هر جایی که برای وب می نویسید استفاده کرد! برای اطلاعات بیشتر در مورد view transitions API، توضیح دهنده کروم توسط Jake Archibald را به شدت توصیه می کنم.

نحوه عملکرد onNavigate

قبل از یادگیری نحوه نوشتن ترانزیشن های view، اجازه دهید ویژگی ای را که همه این کارها را ممکن می کند برجسته کنیم: onNavigate.

تا همین اواخر، SvelteKit دو ویژگی چرخه عمر ناوبری داشت: beforeNavigate، که قبل از شروع ناوبری فعال می شود و afterNavigate، که پس از رفرش صفحه پس از پیمایش فعال می شود. SvelteKit 1.24 سومی را معرفی می کند: onNavigate، که در هر پیمایش، بلافاصله قبل از رندر صفحه جدید فعال می شود. مهم این است که کار خواهد کرد بعد از هر بارگذاری داده برای صفحه به پایان رسیده است – از آنجایی که راه اندازی یک انتقال از یک نما از هرگونه تعامل با صفحه جلوگیری می کند، ما می خواهیم آن را تا حد امکان دیر فعال کنیم.

شما همچنین می توانید یک قول را از onNavigate، که ناوبری را تا زمانی که برطرف شود متوقف می کند. این به ما این امکان را می دهد که منتظر بمانیم تا ناوبری کامل شود تا انتقال view شروع شود.

function delayNavigationfunction delayNavigation(): Promiseany>() {
	return new Promisevar Promise: PromiseConstructor
new any>(executor: (resolve: (value: any) => void, reject: (reason?: any) => void) => void) => Promiseany>
Creates a new Promise.
executor 
A callback used to initialize the promise. This callback is passed two arguments:
a resolve callback used to resolve the promise with a value or the result of another promise,
and a reject callback used to reject the promise with a provided reason or error.
((res(parameter) res: (value: any) => void) => setTimeoutfunction setTimeout[value: any]>(callback: (value: any) => void, delay?: number, value?: any): NodeJS.Timeout (+3 overloads)
namespace setTimeout
MDN Reference
(res(parameter) res: (value: any) => void, 100));
}

onNavigateany(async (navigation(parameter) navigation: any) => {

	return delayNavigationfunction delayNavigation(): Promiseany>();
});

با وجود این موضوع، بیایید ببینیم که چگونه می‌توانید از انتقال مشاهده در برنامه SvelteKit خود استفاده کنید.

شروع به کار با انتقال دید

بهترین راه برای دیدن انتقال‌های مشاهده در عمل این است که خودتان آن را امتحان کنید. می‌توانید با اجرا کردن برنامه نمایشی SvelteKit، آن را بچرخانید npm create svelte@latest در ترمینال محلی یا در مرورگر StackBlitz. مطمئن شوید که از مرورگری استفاده می‌کنید که از view transitions API پشتیبانی می‌کند. پس از اجرای برنامه، موارد زیر را به بلوک اسکریپت اضافه کنید src/routes/+layout.svelte.

import { onNavigate(alias) function onNavigate(callback: (navigation: OnNavigate) => MaybePromisevoid | (() => void)>): void
import onNavigate
A lifecycle function that runs the supplied callback immediately before we navigate to a new URL except during full-page navigations.
If you return a Promise, SvelteKit will wait for it to resolve before completing the navigation. This allows you to — for example — use document.startViewTransition. Avoid promises that are slow to resolve, since navigation will appear stalled to the user.
If a function (or a Promise that resolves to a function) is returned from the callback, it will be called once the DOM has updated.
onNavigate must be called during a component initialization. It remains active as long as the component is mounted.
 } from '$app/navigation';

onNavigate(alias) onNavigate(callback: (navigation: OnNavigate) => MaybePromisevoid | (() => void)>): void
import onNavigate
A lifecycle function that runs the supplied callback immediately before we navigate to a new URL except during full-page navigations.
If you return a Promise, SvelteKit will wait for it to resolve before completing the navigation. This allows you to — for example — use document.startViewTransition. Avoid promises that are slow to resolve, since navigation will appear stalled to the user.
If a function (or a Promise that resolves to a function) is returned from the callback, it will be called once the DOM has updated.
onNavigate must be called during a component initialization. It remains active as long as the component is mounted.
((navigation(parameter) navigation: (NavigationGoto & {
    type: ExcludeNavigationType, "enter" | "leave">;
    willUnload: false;
}) | (NavigationFormSubmit & {
    type: ExcludeNavigationType, "enter" | "leave">;
    willUnload: false;
}) | (NavigationPopState & {
    type: ExcludeNavigationType, "enter" | "leave">;
    willUnload: false;
}) | (NavigationLink & {
    type: ExcludeNavigationType, "enter" | "leave">;
    willUnload: false;
})) => {
	if (!documentvar document: Document
window.document returns a reference to the document contained in the window.
MDN Reference
.startViewTransition(method) Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback | StartViewTransitionOptions): ViewTransition
The startViewTransition() method of the Document interface starts a new same-document (SPA) view transition and returns a ViewTransition object to represent it.
MDN Reference
) return;

	return new Promisevar Promise: PromiseConstructor
new void | (() => void)>(executor: (resolve: (value: void | (() => void) | PromiseLikevoid | (() => void)>) => void, reject: (reason?: any) => void) => void) => Promisevoid | (() => void)>
Creates a new Promise.
executor 
A callback used to initialize the promise. This callback is passed two arguments:
a resolve callback used to resolve the promise with a value or the result of another promise,
and a reject callback used to reject the promise with a provided reason or error.
((resolve(parameter) resolve: (value: void | (() => void) | PromiseLikevoid | (() => void)>) => void) => {
		documentvar document: Document
window.document returns a reference to the document contained in the window.
MDN Reference
.startViewTransition(method) Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback | StartViewTransitionOptions): ViewTransition
The startViewTransition() method of the Document interface starts a new same-document (SPA) view transition and returns a ViewTransition object to represent it.
MDN Reference
(async () => {
			resolve(parameter) resolve: (value: void | (() => void) | PromiseLikevoid | (() => void)>) => void();
			await navigation(parameter) navigation: (NavigationGoto & {
    type: ExcludeNavigationType, "enter" | "leave">;
    willUnload: false;
}) | (NavigationFormSubmit & {
    type: ExcludeNavigationType, "enter" | "leave">;
    willUnload: false;
}) | (NavigationPopState & {
    type: ExcludeNavigationType, "enter" | "leave">;
    willUnload: false;
}) | (NavigationLink & {
    type: ExcludeNavigationType, "enter" | "leave">;
    willUnload: false;
}).complete(property) NavigationBase.complete: Promisevoid>
A promise that resolves once the navigation is complete, and rejects if the navigation
fails or is aborted. In the case of a willUnload navigation, the promise will never resolve
;
		});
	});
});

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

کد چگونه کار می کند

این کد ممکن است کمی گیج کننده به نظر برسد – اگر کنجکاو هستید می توانم آن را خط به خط تجزیه کنم، اما در حال حاضر کافی است بدانید که اضافه کردن آن به شما امکان می دهد در حین پیمایش با view transitions API تعامل داشته باشید.

همانطور که در بالا ذکر شد، onNavigate تماس پاسخ درست قبل از ارائه صفحه جدید پس از پیمایش اجرا می شود. در پاسخ به تماس ما بررسی می کنیم که آیا document.startViewTransition وجود دارد. اگر اینطور نیست (یعنی مرورگر آن را پشتیبانی نمی کند)، زودتر از آن خارج می شویم.

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

return new Promisevar Promise: PromiseConstructor
new any>(executor: (resolve: (value: any) => void, reject: (reason?: any) => void) => void) => Promiseany>
Creates a new Promise.
executor 
A callback used to initialize the promise. This callback is passed two arguments:
a resolve callback used to resolve the promise with a value or the result of another promise,
and a reject callback used to reject the promise with a provided reason or error.
((resolve(parameter) resolve: (value: any) => void) => {
	documentvar document: Document
window.document returns a reference to the document contained in the window.
MDN Reference
.startViewTransition(method) Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback | StartViewTransitionOptions): ViewTransition
The startViewTransition() method of the Document interface starts a new same-document (SPA) view transition and returns a ViewTransition object to represent it.
MDN Reference
(async () => {
		resolve(parameter) resolve: (value: any) => void();
		await navigationvar navigation: Navigation
The navigation read-only property of the Window interface returns the current window's associated Navigation object.
MDN Reference
.completeany;
	});
});

در سازنده وعده، انتقال view را شروع می کنیم. در داخل بازخوانی انتقال view، قولی را که به تازگی برگردانده ایم، حل می کنیم، که به SvelteKit می گوید که باید ناوبری را کامل کند. مهم این است که پیمایش صبر کند تا به پایان برسد تا > بعد از ما انتقال view را شروع می کنیم – مرورگر قبل از اینکه بتواند به حالت جدید منتقل شود باید یک عکس فوری از حالت قدیمی بگیرد.

در نهایت، در داخل view transition callback منتظر می مانیم تا SvelteKit با انتظار، ناوبری را کامل کند navigation.complete.یکبار navigation.complete حل می شود، صفحه جدید در DOM بارگذاری می شود و مرورگر می تواند بین دو حالت متحرک شود.

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

سفارشی کردن انتقال با CSS

ما همچنین می توانیم این انتقال صفحه را با استفاده از انیمیشن CSS سفارشی کنیم. در بلوک سبک شما +layout.svelte، قوانین CSS زیر را اضافه کنید.

@keyframes fade-in {
	from {
		opacity: 0;
	}
}

@keyframes fade-out {
	to {
		opacity: 0;
	}
}

@keyframes slide-from-right {
	from {
		transform: translateX(30px);
	}
}

@keyframes slide-to-left {
	to {
		transform: translateX(-30px);
	}
}

:root::view-transition-old(root) {
	animation:
		90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
		300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

:root::view-transition-new(root) {
	animation:
		210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
		300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

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

توجه داشته باشید که باید اضافه کنیم :root قبل از ::view-transition شبه عناصر – این عناصر فقط در پایه سند قرار دارند، بنابراین ما نمی خواهیم Svelte آنها را با محدوده مؤلفه محدود کند.

ممکن است متوجه شده باشید که کل صفحه به داخل و خارج می‌شود، حتی اگر هدر در صفحات قدیمی و جدید یکسان است. برای ایجاد یک انتقال روان تر، می توانیم یک هدر منحصر به فرد ارائه دهیم view-transition-name به طوری که جدا از بقیه صفحه متحرک باشد. ج src/routes/Header.svelte، پیدا کنید header انتخابگر CSS در بلوک سبک و یک نام انتقال view اضافه کنید.

header {
	display: flex;
	justify-content: space-between;
	view-transition-name: header;
}

اکنون هدر در پیمایش به داخل و خارج نمی‌شود، اما بقیه صفحه این کار را انجام می‌دهد.

رفع انواع

از آنجایی که startViewTransition توسط همه مرورگرها پشتیبانی نمی شود، IDE شما ممکن است از وجود آن اطلاع نداشته باشد. برای حذف خطاها و دریافت ورودی صحیح، موارد زیر را به موارد زیر اضافه کنید app.d.ts:

declare global {
	
	namespace App {
		
		
		
		
	}

	
	interface ViewTransition {
		updateCallbackDone: Promisevoid>;
		ready: Promisevoid>;
		finished: Promisevoid>;
		skipTransition: () => void;
	}

	interface Document {
		startViewTransition(updateCallback: () => Promisevoid>): ViewTransition;
	}
}

export {};

انتقال عناصر فردی

ما به تازگی دیدیم که چگونه عنصر a را می دهد view-transition-name آن را از بقیه انیمیشن های صفحه جدا می کند. راه اندازی a view-transition-name همچنین به مرورگر دستور می دهد تا پس از تکمیل انتقال، آن را به راحتی به موقعیت جدید خود متحرک کند. را view-transition-name به عنوان یک شناسه منحصر به فرد عمل می کند تا مرورگر بتواند موارد منطبق را از حالت قدیمی و جدید شناسایی کند.

بیایید ببینیم این به چه شکل است – پیمایش برنامه آزمایشی ما دارای یک مثلث کوچک است که صفحه فعال را نشان می دهد. در حال حاضر پس از حرکت به طور ناگهانی در موقعیت جدید ظاهر می شود. اجازه دهید آن را راه اندازی کنیم view-transition-name بنابراین در عوض مرورگر آن را به موقعیت جدید خود متحرک می کند.

داخل src/routes/Header.svelte، قانون CSS را پیدا کنید که نشانگر صفحه فعال را ایجاد می کند و به آن یک علامت بدهید view-transition-name:

li[aria-current='page']::before {
	
	view-transition-name: active-page;
}

با افزودن این خط، نشانگر به جای پریدن، اکنون به آرامی به موقعیت جدید خود می لغزد.

(شما به راحتی می توانید تفاوت را از دست بدهید – به نشانگر مثلث متحرک کوچک در بالای صفحه نگاه کنید!)

کاهش حرکت

رعایت اولویت‌های حرکتی کاربران در حین اجرای انیمیشن در وب بسیار مهم است. فقط به این دلیل که می توانید یک تغییر صفحه شدید اعمال کنید به این معنی نیست که باید انجام دهید. برای غیرفعال کردن همه انتقال‌های صفحه برای کاربرانی که کاهش حرکت را ترجیح می‌دهند، می‌توانید موارد زیر را به جهانی اضافه کنید styles.css:

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

اگرچه این ممکن است ایمن ترین گزینه باشد، اما کاهش حرکت لزوما به معنای عدم وجود انیمیشن نیست. در عوض، می‌توانید تغییرات دیدگاه خود را به صورت موردی در نظر بگیرید. برای مثال، می‌توانیم انیمیشن کشویی را غیرفعال کنیم، اما جریان متقاطع پیش‌فرض (که شامل حرکت نمی‌شود) را رها کنیم. شما می توانید این کار را با بسته بندی انجام دهید ::view-transition قوانینی که می خواهید در الف غیر فعال کنید prefers-reduced-motion: no-preference درخواست رسانه:

@media (prefers-reduced-motion: no-preference) {
	:root::view-transition-old(root) {
		animation:
			90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
			300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
	}

	:root::view-transition-new(root) {
		animation:
			210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
			300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
	}
}

بعدش چیه

همانطور که می بینید، SvelteKit چیز زیادی انتزاعی نمی کند چگونه مشاهده انتقال کار می کند – شما به طور مستقیم با مرورگر داخلی تعامل دارید document.startViewTransition و ::view-transition APIها، نه انتزاعات چارچوب مانند آنچه در Nuxt و Astro وجود دارد. ما مشتاقیم ببینیم که چگونه مردم در نهایت از انتقال دید در برنامه‌های SvelteKit استفاده می‌کنند و آیا منطقی است که انتزاعات سطح بالاتر خود را در آینده اضافه کنیم.

منابع

شما می توانید کد آزمایشی را از این پست در GitHub و نسخه زنده پیاده سازی شده در Vercel پیدا کنید. در اینجا برخی از منابع دیگر در مورد انتقال نمایش وجود دارد که ممکن است برای شما مفید باشد: