focus-at · March 13, 2023 09:41 · Mar 13, 2023 · Mar 13, 2023 · Mar 13, 2023 · Mar 13, 2023
diff --git a/page-transition.ts b/page-transition.ts
@@ -3,31 +3,31 @@ import { beforeNavigate, afterNavigate } from '$app/navigation';
 export const usePageTransition = () => {
 	let resolver:any;
 
-  const afterNavigateCallback = () => {
-    // Хотя afterNavigate выполняется после afterNavigate, resolver может отсутствовать
-    if (resolver) {
-      resolver();
-      resolver = null;
-    }
-  }
+	const afterNavigateCallback = () => {
+		// Хотя afterNavigate выполняется после afterNavigate, resolver может отсутствовать
+		if (resolver) {
+			resolver();
+			resolver = null;
+		}
+	}
 
 	beforeNavigate(async ({ from, to, type }) => {
-    const isSamePage = from?.url.href == to?.url.href;
+		const isSamePage = from?.url.href == to?.url.href;
 
-    // FIXME на данный момент работает только popstate навигация и не работает link
-    if (type != 'popstate') return;
+		// FIXME на данный момент работает только popstate навигация и не работает link
+		// if (type != 'popstate') return;
 
-    // Выходим если не поддерживается, выходим если это таже страница
-    if (!document.startViewTransition || isSamePage) return;
+		// Выходим если не поддерживается, выходим если это таже страница
+		if (!document.startViewTransition || isSamePage) return;
 
-    // Создаем промис который разрешим после завешения навигации
-    const navigationEndPromise = new Promise(resolve => resolver = resolve);
+		// Создаем промис который разрешим после завешения навигации
+		const navigationEndPromise = new Promise(resolve => resolver = resolve);
 
-    // Запускаем переход и ждем завершения навигации
-    document.startViewTransition(async () => {
-      await navigationEndPromise;
-    });
+		// Запускаем переход и ждем завершения навигации
+		document.startViewTransition(async () => {
+			await navigationEndPromise;
+		});
 	});
 
-  afterNavigate(afterNavigateCallback);
+	afterNavigate(afterNavigateCallback);
 };
diff --git a/+layout.svelte b/+layout.svelte
@@ -1,5 +1,5 @@
 ...
-  // Импортируем и запускаем
+  	// Импортируем и запускаем
 	import { usePageTransition } from '$lib/page-transition';
-  usePageTransition();
+	usePageTransition();
 ...
diff --git a/+layout.svelte b/+layout.svelte
@@ -2,4 +2,4 @@
   // Импортируем и запускаем
 	import { usePageTransition } from '$lib/page-transition';
   usePageTransition();
-...
+...
diff --git a/page-transition.ts b/page-transition.ts
@@ -30,4 +30,4 @@ export const usePageTransition = () => {
 	});
 
   afterNavigate(afterNavigateCallback);
-};
+};
diff --git a/style.css b/style.css
@@ -49,4 +49,4 @@
 
 .back-transition::view-transition-new(root) {
   animation-name: fade-in, slide-from-left;
-}
+}
diff --git a/+layout.svelte b/+layout.svelte
@@ -0,0 +1,5 @@
+...
+  // Импортируем и запускаем
+	import { usePageTransition } from '$lib/page-transition';
+  usePageTransition();
+...
diff --git a/page-transition.ts b/page-transition.ts
@@ -0,0 +1,33 @@
+import { beforeNavigate, afterNavigate } from '$app/navigation';
+
+export const usePageTransition = () => {
+	let resolver:any;
+
+  const afterNavigateCallback = () => {
+    // Хотя afterNavigate выполняется после afterNavigate, resolver может отсутствовать
+    if (resolver) {
+      resolver();
+      resolver = null;
+    }
+  }
+
+	beforeNavigate(async ({ from, to, type }) => {
+    const isSamePage = from?.url.href == to?.url.href;
+
+    // FIXME на данный момент работает только popstate навигация и не работает link
+    if (type != 'popstate') return;
+
+    // Выходим если не поддерживается, выходим если это таже страница
+    if (!document.startViewTransition || isSamePage) return;
+
+    // Создаем промис который разрешим после завешения навигации
+    const navigationEndPromise = new Promise(resolve => resolver = resolve);
+
+    // Запускаем переход и ждем завершения навигации
+    document.startViewTransition(async () => {
+      await navigationEndPromise;
+    });
+	});
+
+  afterNavigate(afterNavigateCallback);
+};
diff --git a/style.css b/style.css
@@ -0,0 +1,52 @@
+@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); }
+}
+
+@keyframes slide-from-left {
+  to { transform: translateX(-30px); }
+}
+
+@keyframes slide-to-right {
+  to { transform: translateX(30px); }
+}
+
+::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;
+}
+
+::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;
+}
+
+::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;
+}
+
+::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;
+}
+
+/* Overrides for 'back' transitions */
+.back-transition::view-transition-old(root) {
+  animation-name: fade-out, slide-to-right;
+}
+
+.back-transition::view-transition-new(root) {
+  animation-name: fade-in, slide-from-left;
+}