Last active
March 13, 2023 09:41
-
-
Save focus-at/971dde6e767aa47aa71b4fc3db0c9cac to your computer and use it in GitHub Desktop.
svelte navigate with View Transitions API
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ... | |
| // Импортируем и запускаем | |
| import { usePageTransition } from '$lib/page-transition'; | |
| usePageTransition(); | |
| ... |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
chrome://flags/#view-transition