{"id":13808182,"url":"https://github.com/DerStimmler/ngx-easy-view-transitions","last_synced_at":"2025-05-14T02:31:27.866Z","repository":{"id":238284495,"uuid":"719793067","full_name":"DerStimmler/ngx-easy-view-transitions","owner":"DerStimmler","description":"Angular library for easier use of the View Transitions API","archived":false,"fork":false,"pushed_at":"2024-05-31T19:22:28.000Z","size":289,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-15T00:50:22.816Z","etag":null,"topics":["angular","animations","library","ngx","npm","typescript","view-transitions","view-transitions-api"],"latest_commit_sha":null,"homepage":"https://derstimmler.github.io/ngx-easy-view-transitions/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DerStimmler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-16T22:59:23.000Z","updated_at":"2024-11-11T08:22:49.000Z","dependencies_parsed_at":"2024-06-19T03:02:28.529Z","dependency_job_id":"ad291ccc-0a64-4af2-a107-6fa7ca7b39ae","html_url":"https://github.com/DerStimmler/ngx-easy-view-transitions","commit_stats":null,"previous_names":["derstimmler/ngx-easy-view-transitions"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DerStimmler%2Fngx-easy-view-transitions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DerStimmler%2Fngx-easy-view-transitions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DerStimmler%2Fngx-easy-view-transitions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DerStimmler%2Fngx-easy-view-transitions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DerStimmler","download_url":"https://codeload.github.com/DerStimmler/ngx-easy-view-transitions/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273224,"owners_count":17448071,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","animations","library","ngx","npm","typescript","view-transitions","view-transitions-api"],"created_at":"2024-08-04T01:01:36.896Z","updated_at":"2024-11-19T00:30:37.189Z","avatar_url":"https://github.com/DerStimmler.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Animations"],"readme":"# ngx-easy-view-transitions\n\n[![npm version](https://img.shields.io/npm/v/ngx-easy-view-transitions)](https://www.npmjs.org/package/ngx-easy-view-transitions/)\n[![npm downloads](https://img.shields.io/npm/dt/ngx-easy-view-transitions)](https://www.npmjs.org/package/ngx-easy-view-transitions/)\n![build](https://github.com/DerStimmler/ngx-easy-view-transitions/actions/workflows/build.yml/badge.svg)\n[![GitHub license](https://img.shields.io/github/license/DerStimmler/ngx-easy-view-transitions)](https://github.com/DerStimmler/ngx-easy-view-transitions/blob/main/LICENSE.md)\n\nAngular library for easier use of the View Transitions API\n\n## Demo\n\nhttps://derstimmler.github.io/ngx-easy-view-transitions/\n\n## Installation\n\nAvailable on [npm](https://www.npmjs.org/package/ngx-easy-view-transitions/).\n\n```bash\nnpm install ngx-easy-view-transitions\n```\n\nYou have to enable Angulars built-in view transitions in the Router using the [`withViewTransitions()`](https://angular.io/api/router/withViewTransitions#usage-notes) function.\n\n```typescript\nbootstrapApplication(AppComponent,\n  {\n    providers: [\n      provideRouter(appRoutes, withViewTransitions())\n    ]\n  }\n);\n```\n\n## Usage\n\n### Morph elements\n\nTo morph an element during navigation from the old to the new state use the `transitionName` directive and provide the same name on both pages.\n\n```typescript\nimport { TransitionNameDirective } from 'ngx-easy-view-transitions';\n```\n\n`users.component.html`\n\n```angular2html\n\u003cimg transitionName=\"profile-picture\" src=\"...\"\u003e\n```\n\n`user.component.html`\n\n```angular2html\n\u003cimg transitionName=\"profile-picture\" src=\"...\"\u003e\n```\n\nNote that each `transitionName` must be unique for a page.\n\n### Customize animations\n\nInstead of morphing an element, you can provide custom animations for entering and leaving the view using the `inAnimation` and `outAnimation` inputs.\nThere are two ways to provide a custom animations: As CSS `@keyframes` rule or [`Keyframe`](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) array.\n\n#### Using CSS @keyframes\n\nYou can simply use a CSS [`@keyframes`](https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes) rule from your CSS:\n\n```css\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n```\n\n```typescript\ninAnimation = { keyframeName: 'fadeIn', duration: 600 };\noutAnimation = { keyframeName: 'fadeIn', duration: 600, reverse: true };\n```\n\n```angular2html\n\u003cimg transitionName=\"profile-picture\" [inAnimation]=\"inAnimation\" [outAnimation]=\"outAnimation\" src=\"...\"\u003e\n```\n\n#### Using Keyframe array\n\nWhen you want to use typed objects instead of CSS you can provide a [`Keyframe`](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) array:\n\n```typescript\nconst fadeIn: Keyframe[] = [\n  {\n    opacity: 0,\n    offset: 0,\n  },\n  {\n    opacity: 1,\n    offset: 1,\n  },\n];\n```\n\n```typescript\ninAnimation = { keyframes: fadeIn, duration: 600 };\noutAnimation = { keyframes: fadeIn, duration: 600, reverse: true };\n```\n\n```angular2html\n\u003cimg transitionName=\"profile-picture\" [inAnimation]=\"inAnimation\" [outAnimation]=\"outAnimation\" src=\"...\"\u003e\n```\n\n### Built-In animations\n\nTo start faster there are some built-in animations available under `DefaultTransitions.*`.\n\n```typescript\nimport { DefaultTransitions } from 'ngx-easy-view-transitions';\n\ninAnimation = { keyframes: DefaultTransitions.fadeInUp, duration: 600 };\n```\n\nYou can see them in the [demo](https://derstimmler.github.io/ngx-easy-view-transitions/animations) and [here](https://github.com/DerStimmler/ngx-easy-view-transitions/blob/main/ngx-easy-view-transitions/src/lib/default-transitions.ts).\n\n### Exclude element from view transitions\n\nWhen you want to exclude an element form view transitions you can add the `noTransition` directive.\n\n```typescript\nimport { NoTransitionDirective } from 'ngx-easy-view-transitions';\n```\n\n```angular2html\n\u003cimg noTransition src=\"...\"\u003e\n```\n\n### Configure default transition\n\nBy default View Transitions API will perform a cross-fade animation on all elements.\nBut you can also provide your own in and out animations by adding the `provideDefaultViewTransition()` provider function.\n\nIn the following example the default animation gets disabled:\n\n```typescript\nbootstrapApplication(AppComponent,\n  {\n    providers: [\n      provideRouter(appRoutes, withViewTransitions()),\n      provideDefaultViewTransition(\n        { keyframes: DefaultTransitions.none, duration: 0 },\n        { keyframes: DefaultTransitions.none, duration: 0 }\n      )\n    ]\n  }\n);\n```\n\n## Development\n\nInstall dependencies with: `pnpm install`\n\nRun `pnpm demo` to run the demo app on a local development server.\nYou can access it on http://localhost:4200.\n\nRun `pnpm test` to test all projects.\n\nRun `pnpm lint` to lint all projects.\n\nRun `pnpm build` to build all projects. You can find the output under `/dist`.\n\nSince it's a nx workspace you can use the common nx commands for everything else.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDerStimmler%2Fngx-easy-view-transitions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDerStimmler%2Fngx-easy-view-transitions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDerStimmler%2Fngx-easy-view-transitions/lists"}