{"_id":"@288-toolkit/page-transition","_rev":"5-829538ae9d78601fe55df6f4050d63c0","name":"@288-toolkit/page-transition","dist-tags":{"latest":"3.0.2"},"versions":{"1.0.0":{"name":"@288-toolkit/page-transition","version":"1.0.0","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/page-transition@1.0.0","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"3e93b60f964a0c5b6753fc9bf30d2cf6eca5944a","tarball":"https://registry.npmjs.org/@288-toolkit/page-transition/-/page-transition-1.0.0.tgz","fileCount":3,"integrity":"sha512-sngqi+Ate5OwZM2aUZIc1sjuOfzUPjB3sMYR+2OtyP1hNjV4k11bfVdHS0lmWFAye7isq0zLkEaxCfnAik2Wbg==","signatures":[{"sig":"MEYCIQDY9toOOBjIsIxEffPg5T/EmpOFlyd/+42nLujoop8CYgIhAJpxnH733zFpob9vDCMWXg/laf3xv/QfJmbeXBRv2NAq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":11799},"type":"module","_from":"file:288-toolkit-page-transition-1.0.0.tgz","exports":{".":{"default":"./src/index.ts"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/2b27634e26724f3a2c06dbf1bbad91ae/288-toolkit-page-transition-1.0.0.tgz","_integrity":"sha512-sngqi+Ate5OwZM2aUZIc1sjuOfzUPjB3sMYR+2OtyP1hNjV4k11bfVdHS0lmWFAye7isq0zLkEaxCfnAik2Wbg==","_npmVersion":"10.5.0","description":"```sh npm i @288-toolkit/page-transition ```","directories":{},"_nodeVersion":"20.12.2","dependencies":{"esm-env":"1.0.0","@288-toolkit/types":"^1.3.3"},"_hasShrinkwrap":false,"peerDependencies":{"svelte":"4.x || 5.x","@sveltejs/kit":"2.x"},"_npmOperationalInternal":{"tmp":"tmp/page-transition_1.0.0_1714484005850_0.8927181484402669","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@288-toolkit/page-transition","version":"3.0.0","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/page-transition@3.0.0","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"f560c881f864b5d7894e6ed55379ae6b4c4dc68e","tarball":"https://registry.npmjs.org/@288-toolkit/page-transition/-/page-transition-3.0.0.tgz","fileCount":4,"integrity":"sha512-eDYujXzAHhZTctHYFEnJ6VeCttG5X2fTYp2QXV4RYSBiMB2WhfB63UhP3Jbk2vJVi37J3MXBSMK/UbxOtNI0Aw==","signatures":[{"sig":"MEUCIAOdUJstiI5H5LixN3huevfSWdUe1ODgamfInD/GrdXSAiEAgDBEXQj5IY/ToQNpkzzCqC4m6Ld75pLRzUOPxnkOPic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14086},"type":"module","_from":"file:288-toolkit-page-transition-3.0.0.tgz","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","build":"svelte-package","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/af618d218d293548ef9d6c7d406cdd73/288-toolkit-page-transition-3.0.0.tgz","_integrity":"sha512-eDYujXzAHhZTctHYFEnJ6VeCttG5X2fTYp2QXV4RYSBiMB2WhfB63UhP3Jbk2vJVi37J3MXBSMK/UbxOtNI0Aw==","_npmVersion":"10.5.0","description":"```sh npm i @288-toolkit/page-transition ```","directories":{},"_nodeVersion":"20.12.2","dependencies":{"esm-env":"1.0.0","@288-toolkit/types":"^3.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"svelte":"4.x || 5.x","@sveltejs/kit":"2.x"},"_npmOperationalInternal":{"tmp":"tmp/page-transition_3.0.0_1714509590933_0.7702680136911408","host":"s3://npm-registry-packages"}},"3.0.1":{"name":"@288-toolkit/page-transition","version":"3.0.1","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/page-transition@3.0.1","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"216c69442be1cdca4dba02d8d7bfc728da643c60","tarball":"https://registry.npmjs.org/@288-toolkit/page-transition/-/page-transition-3.0.1.tgz","fileCount":4,"integrity":"sha512-C6iFQ6tcO4+lIhvH9HTu+RQvMb7tbqzW3TsiNorjfyTBIkXa3DluSGIOYw/ezhKNBhKoDHdLdGK4eg7xovsMdg==","signatures":[{"sig":"MEYCIQDRUA49dGny+Ks2lYrw1v69fwplQc0lmH36TneiH2M30gIhAK2tg4TnJmNenhKTGmhfRfXXOV23m1K4vMWW+X0aBcPt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14085},"type":"module","_from":"file:288-toolkit-page-transition-3.0.1.tgz","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","build":"svelte-package","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/7f16287a2d0f1576b73b9c17573822aa/288-toolkit-page-transition-3.0.1.tgz","_integrity":"sha512-C6iFQ6tcO4+lIhvH9HTu+RQvMb7tbqzW3TsiNorjfyTBIkXa3DluSGIOYw/ezhKNBhKoDHdLdGK4eg7xovsMdg==","_npmVersion":"10.5.0","description":"```sh npm i @288-toolkit/page-transition ```","directories":{},"_nodeVersion":"20.12.2","dependencies":{"esm-env":"1.0.0","@288-toolkit/types":"^3.0.0"},"_hasShrinkwrap":false,"peerDependencies":{"svelte":"4.x || 5.x","@sveltejs/kit":"2.x"},"_npmOperationalInternal":{"tmp":"tmp/page-transition_3.0.1_1714569421891_0.4577971709028401","host":"s3://npm-registry-packages"}},"3.0.2":{"name":"@288-toolkit/page-transition","version":"3.0.2","author":{"name":"DeuxHuitHuit"},"license":"MIT","_id":"@288-toolkit/page-transition@3.0.2","maintainers":[{"name":"nitriques","email":"open-source@deuxhuithuit.com"},{"name":"f-elix","email":"guerinfelix08@gmail.com"}],"dist":{"shasum":"3a7f65be004ff13beaec1b9f0a250187e4809e05","tarball":"https://registry.npmjs.org/@288-toolkit/page-transition/-/page-transition-3.0.2.tgz","fileCount":4,"integrity":"sha512-VJgMy9g0sfQFqjJn3eR05ffZnKqvgzZO9puOwupvaHU4zM/QcnMf5CVxkxAvPkLpaRZNn/Qul0a8dTY/yGHltA==","signatures":[{"sig":"MEQCIG/2oUgI5V/R2NHlPQ3uhm89weOhJAgjeYShbqU8x5W4AiAlUWN0XEPOzS8LfPx59pBM2u4Rm3SPzKPfdnALKp8HQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":14092},"type":"module","_from":"file:288-toolkit-page-transition-3.0.2.tgz","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"}},"scripts":{"lc":"npm run lint && npm run check","lint":"eslint --max-warnings=0 --cache .","test":"vitest run","build":"svelte-package","check":"svelte-check --tsconfig ./tsconfig.json --fail-on-warnings","format":"npm run format:file .","lc:watch":"npm run lint && npm run check -- --watch","lint:fix":"npm run lint -- --fix","test:watch":"vitest","check:watch":"npm run check -- --watch","format:file":"npm run format:prettier -- --write","format:prettier":"prettier --config ./.prettierrc"},"_npmUser":{"name":"f-elix","email":"guerinfelix08@gmail.com"},"_resolved":"/tmp/9c53e96598c7e49ed67cf1b79d9f6fdd/288-toolkit-page-transition-3.0.2.tgz","_integrity":"sha512-VJgMy9g0sfQFqjJn3eR05ffZnKqvgzZO9puOwupvaHU4zM/QcnMf5CVxkxAvPkLpaRZNn/Qul0a8dTY/yGHltA==","_npmVersion":"10.5.2","description":"```sh npm i @288-toolkit/page-transition ```","directories":{},"_nodeVersion":"20.13.1","dependencies":{"esm-env":"1.0.0","@288-toolkit/types":"^3.1.0"},"_hasShrinkwrap":false,"peerDependencies":{"svelte":"4.x || 5.x","@sveltejs/kit":"2.x"},"_npmOperationalInternal":{"tmp":"tmp/page-transition_3.0.2_1715871157762_0.36812549208518974","host":"s3://npm-registry-packages"}}},"time":{"created":"2024-04-30T13:33:25.721Z","modified":"2025-09-23T15:34:42.781Z","1.0.0":"2024-04-30T13:33:25.995Z","3.0.0":"2024-04-30T20:39:51.089Z","3.0.1":"2024-05-01T13:17:02.055Z","3.0.2":"2024-05-16T14:52:37.910Z"},"author":{"name":"DeuxHuitHuit"},"license":"MIT","description":"```sh npm i @288-toolkit/page-transition ```","maintainers":[{"email":"open-source@deuxhuithuit.com","name":"nitriques"}],"readme":"# Page-transition\n\n```sh\nnpm i @288-toolkit/page-transition\n```\n\nThis page transition system leverages Sveltekit's `onNavigate` and allows for multiple different\ntransitions within the same site. Each transition has to be registered with a unique key and a\ncondition. A store will then be provided so the components can get notified when the transition is\ntriggered.\n\n## `registerTransition()` and `endTransition()`\n\nA function to register a transition.\n\nTo register a default transition, use the `'default'` key. The default transition does not need a\ncondition because it will be played on every navigation if there are no other transition superseding\nit.\n\nTo override the default transition, or simply add a transition for a specific navigation, the key\ncan be any string, as long is it is unique. You must also provide a condition function that returns\n`true` if the transition has to be played. This condition function receives the same\n\nThis function MUST be called at component initialization.\n\n```ts\n/**\n * @see https://kit.svelte.dev/docs/types#public-types-navigation\n */\ntype TransitionCondition = (nav: Navigation) => boolean;\n```\n\n`registerTransition` returns a readable store that is `null` by default, and is a `Transition`\nobject while the transition is happening. The `key` of the `Transition` object will always be the\nkey that was passed to `registerTransition`. That way, the store is scoped to this particular\ntransition.\n\n```ts\n/**\n * @see https://kit.svelte.dev/docs/types#public-types-navigationtarget\n */\ntype Transition = Maybe<{\n\tfrom: Maybe<NavigationTarget>;\n\tto: Maybe<NavigationTarget>;\n\tkey: string;\n}>;\n```\n\nWhen a transition is playing, it is on the user to end the transition by calling `endTransition()`.\nThis function resolves the promise that Sveltekit waits for from the `onNavigate` callback to render\nthe new page. If it is never called, the new page is rendered.\n\nIt accepts an optional callback that will run after the new page is rendered.\n\n### Examples\n\n#### Default transition\n\n```svelte\n<script lang=\"ts\">\n\timport { registerTransition, endTransition } from '@288-toolkit/page-transition';\n\n\t// Registering the default transition\n\tconst transitioning = registerTransition('default');\n</script>\n\n{#if !$transitioning}\n\t<div transition:fade={{ duration: 150 }} on:outroEnd={endTransition}>\n\t\t<slot />\n\t</div>\n{/if}\n```\n\n#### Custom transition\n\n`ArticleCard.svelte`\n\n```svelte\n<script lang=\"ts\">\n\timport { registerTransition, endTransition } from '@288-toolkit/page-transition';\n\n\texport let article;\n\n\tconst href = article.href;\n\n\t// Registering a unique key for this particular article\n\tconst transitioning = registerTransition(`article-${href}`, {\n\t\tcondition: (nav) => {\n\t\t\treturn nav?.to?.url.pathname === href;\n\t\t}\n\t});\n</script>\n\n{#if !$transitioning}\n\t<div out:fly={{ duration: 700, y: '100%' }} on:outroEnd={endTransition}>\n\t\t<slot />\n\t</div>\n{/if}\n```\n\n## `skipTransition()`\n\nSometimes we want to opt-out of our page transition system and bypass all transitions, even the\ndefault one. We can do this by calling `skipTransition` and providing it with a condition function.\nIf the condition returns `true`, all transitions are skipped.\n\n```svelte\n<script lang=\"ts\">\n\timport { skipTransition } from '@288-toolkit/page-transition';\n\n\texport let article;\n\n\tconst href = article.href;\n\n\tskipTransition((nav) => {\n\t\treturn nav?.to?.url.pathname === href;\n\t});\n</script>\n\n<!-- ... -->\n```\n\n## `$transitioning`\n\nThe module exports a general readable store that is updated with a `Transition` object whenever any\ntransition occurs and is `null` the rest of the time. This is useful if you want to easily run some\ncode for a transition outside of the component that has registered it, or for several transitions\nwith similar keys, for example.\n\n```svelte\n<script lang=\"ts\">\n\timport { transitioning } from '@288-toolkit/page-transition';\n</script>\n\n{#if $transitioning?.key.startsWith('article-')}\n\t<!-- ... -->\n{/if}\n```\n","readmeFilename":"README.md"}