{"id":13628032,"url":"https://github.com/vrimar/mithril-transition-group","last_synced_at":"2025-04-17T00:33:07.090Z","repository":{"id":27323952,"uuid":"112819958","full_name":"vrimar/mithril-transition-group","owner":"vrimar","description":"A set of Mithril components for creating state/class based transitions","archived":false,"fork":false,"pushed_at":"2023-03-04T02:29:45.000Z","size":222,"stargazers_count":11,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-01T21:46:46.587Z","etag":null,"topics":["mithril","transition"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vrimar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-12-02T06:52:18.000Z","updated_at":"2022-02-03T18:39:44.000Z","dependencies_parsed_at":"2024-06-21T03:36:43.535Z","dependency_job_id":"0e173ca7-d3c0-4c82-a317-7e7d50bc5fd8","html_url":"https://github.com/vrimar/mithril-transition-group","commit_stats":{"total_commits":35,"total_committers":2,"mean_commits":17.5,"dds":"0.48571428571428577","last_synced_commit":"f5ef571ad2cd2497b53cceabc65e1d1b8e07e56b"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vrimar%2Fmithril-transition-group","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vrimar%2Fmithril-transition-group/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vrimar%2Fmithril-transition-group/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vrimar%2Fmithril-transition-group/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vrimar","download_url":"https://codeload.github.com/vrimar/mithril-transition-group/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249293159,"owners_count":21245687,"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":["mithril","transition"],"created_at":"2024-08-01T22:00:43.332Z","updated_at":"2025-04-17T00:33:06.842Z","avatar_url":"https://github.com/vrimar.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# mithril-transition-group\n\nA set of Mithril components for creating state/class based transitions. Inspired by [react-transition-group](https://github.com/reactjs/react-transition-group).\n\n## Installation\n\n```\nnpm install --save mithril-transition-group\n```\n\n## Transition\n`Transition` is a component that allows you to transition children based on current animation state.\n\nThere are 4 main states a `Transition` can be in:\n1. ENTERING\n2. ENTERED\n3. EXITING\n4. EXITED\n\nBy default, the `Transition` component does not alter it's children; it only tracks \"enter\" and \"exit\" transitions.\n\n## Transition Example\n\n[Transition Example](https://codesandbox.io/s/w7o9q9zzk7)\n\n## Transition API\n```javascript\ninterface ITransitionAttrs {\n  /** Displays the content; triggers onEnter/onExit callbacks */\n  isVisible?: boolean;\n\n  /** Content to be transitioned */\n  content?: m.Children | ((state: TransitionState) =\u003e m.Children);\n\n  /** Invoked on initial component enter */\n  onEnter?: (node: HTMLElement) =\u003e void;\n\n  /** Invoked when component is entering */\n  onEntering?: (node: HTMLElement) =\u003e void;\n\n  /** Invoked when component has entered */\n  onEntered?: (node: HTMLElement) =\u003e void;\n\n  /** Invoked on initial component exit */\n  onExit?: (node: HTMLElement) =\u003e void;\n\n  /** Invoked when component is exiting */\n  onExiting?: (node: HTMLElement) =\u003e void;\n\n  /** Invoked on when component has exited */\n  onExited?: (node: HTMLElement) =\u003e void;\n\n  /** Timeouts for enter/exit transition */\n  timeout: number | {\n    enter: number;\n    exit: number;\n  };\n}\n```\n\n## CSS Transition\n\nA component that uses CSS classes for transitions. It is inspired by [ng-animate](http://www.nganimate.org/).\n\n`CSSTransition` applies a pair of classes (specified by the `transitionClass` property) to `content` during the `enter` and `exit` transition states. Assuming `transitionClass=\"fade\"`, the lifecycle process is as follows.\n\n1. onEnter: `.fade-enter` class is added to `content`\n2. onEntering: `.fade-enter-active` class is added to `content`\n3. onEntered: `.fade-enter` and `.fade-enter-active` are removed from `content`\n4. onExit: `.fade-exit` class is added to `content`\n5. onExiting: `.fade-exit-active` class is added to `content`\n6. onExited: `.fade-exit` and `.fade-exit-active` are removed from `content`\n\n## CSSTransition Example\n\n[CSSTransition Dialog Example](https://codesandbox.io/s/p9vp1o940m)\n\n### CSSTransition API\n\n```javascript\ninterface ICSSTransitionAttrs {\n  /** Displays the content; triggers onEnter/onExit callbacks */\n  isVisible?: boolean;\n\n  /** Content to be transitioned */\n  content?: m.Children | ((state: TransitionState) =\u003e m.Children);\n\n  /** Invoked on initial component enter */\n  onEnter?: (node: HTMLElement) =\u003e void;\n\n  /** Invoked when component is entering */\n  onEntering?: (node: HTMLElement) =\u003e void;\n\n  /** Invoked when component has entered */\n  onEntered?: (node: HTMLElement) =\u003e void;\n\n  /** Invoked on initial component exit */\n  onExit?: (node: HTMLElement) =\u003e void;\n\n  /** Invoked when component is exiting */\n  onExiting?: (node: HTMLElement) =\u003e void;\n\n  /** Invoked on when component has exited */\n  onExited?: (node: HTMLElement) =\u003e void;\n\n  /** Timeouts for enter/exit transition */\n  timeout: number | {\n    enter: number;\n    exit: number;\n  };\n\n  /** CSS class base to use for enter/exit transitions */\n  transitionClass: string;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvrimar%2Fmithril-transition-group","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvrimar%2Fmithril-transition-group","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvrimar%2Fmithril-transition-group/lists"}