{"id":13547916,"url":"https://github.com/zaceno/hyperapp-transitions","last_synced_at":"2025-04-02T20:31:09.569Z","repository":{"id":66006954,"uuid":"96327844","full_name":"zaceno/hyperapp-transitions","owner":"zaceno","description":"Animate Hyperapp components as they are appear, disappear and move around on the page. ","archived":true,"fork":false,"pushed_at":"2020-03-11T22:32:02.000Z","size":181,"stargazers_count":81,"open_issues_count":4,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-03T16:37:57.404Z","etag":null,"topics":["animations","hyperapp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/zaceno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-07-05T14:24:01.000Z","updated_at":"2023-02-19T08:49:03.000Z","dependencies_parsed_at":"2023-03-02T23:00:16.702Z","dependency_job_id":null,"html_url":"https://github.com/zaceno/hyperapp-transitions","commit_stats":null,"previous_names":["hyperappcommunity/transitions"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaceno%2Fhyperapp-transitions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaceno%2Fhyperapp-transitions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaceno%2Fhyperapp-transitions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zaceno%2Fhyperapp-transitions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zaceno","download_url":"https://codeload.github.com/zaceno/hyperapp-transitions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246887935,"owners_count":20850168,"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":["animations","hyperapp"],"created_at":"2024-08-01T12:01:03.119Z","updated_at":"2025-04-02T20:31:09.550Z","avatar_url":"https://github.com/zaceno.png","language":"JavaScript","readme":"This project is only compatible with hyperapp v1, and I do not intend to maintain it any longer. Hence, I am archiving it.\n\n# \u003cimg height=24 src=https://cdn.rawgit.com/JorgeBucaran/f53d2c00bafcf36e84ffd862f0dc2950/raw/882f20c970ff7d61aa04d44b92fc3530fa758bc0/Hyperapp.svg\u003e Hyperapp Transitions\n\n[![Travis CI](https://api.travis-ci.org/hyperapp/transitions.svg?branch=master)](https://travis-ci.org/hyperapp/transitions) [![npm](https://img.shields.io/npm/v/@hyperapp/transitions.svg)](https://www.npmjs.org/package/@hyperapp/transitions) [![Slack](https://hyperappjs.herokuapp.com/badge.svg)](https://hyperappjs.herokuapp.com \"Join us\")\n\nHyperapp Transitions lets you animate your [Hyperapp](https://github.com/hyperapp/hyperapp) components as they are appear, dissapear and move around on the page. Use it to provide your user with important cues and a smoother experience.\n\n* **CSS Based** — Anything you can `transition` with CSS can be animated, including background-color, opacity, position and scale.\n* **Animate Layouts** — Reorder nodes in a list or flexbox-layout, and watch them gracefully *slide* into place \n* **Composable** — Stack multiple transitions with different delay and duration for complex animation effects.\n\n## Getting Started\n\nSimply wrap your component in one of the decorator components exported from Hyperapp Transitions:\n\n```jsx\nimport {Enter} from \"@hyperapp/transitions\"\n\nconst Notification = ({key, message}) =\u003e (\n    \u003cEnter css={{opacity: \"0\", transform: \"translateX(100%)\"}}\u003e\n        \u003cdiv key={key} class=\"notification\"\u003e\n            {message}\n        \u003c/div\u003e\n    \u003c/Enter\u003e\n)\n```\n\nUse it as you would any component. The difference is, now your newly added `Notifications` will not just suddenly appear, but rather fade and slide in from the right.\n\n## Installation\n\nInstall with npm or Yarn.\n\n\u003cpre\u003e\nnpm i \u003ca href=https://www.npmjs.com/package/@hyperapp/transitions\u003e@hyperapp/transitions\u003c/a\u003e\n\u003c/pre\u003e\n\nThen with a module bundler like [Rollup](https://rollupjs.org) or [Webpack](https://webpack.js.org), use as you would anything else.\n\n```js\nimport {Enter, Exit, Move} from \"@hyperapp/transitions\"\n```\n\nIf you don't want to set up a build environment, you can download Hyperapp Transitions from a CDN like [unpkg.com](https://unpkg.com/@hyperapp/transitions) and it will be globally available through the \u003csamp\u003ewindow.transitions\u003c/samp\u003e object.\n\n```html\n\u003cscript src=\"https://unpkg.com/@hyperapp/transitions\"\u003e\u003c/script\u003e\n```\n\n## Overview\n\nHyperapp Transitions exports three components: `Enter`, `Exit` and `Move` described below. Each take a number of attributes for defining the animation.\n\nThe components are *decorator-components* (a.k.a \"higher-order components\"), which means that they do not add anything to the virtual DOM tree, but rather modify and return their children. \n\n## Enter\n\nUse the Enter component to make elements appear in an animated fashion, when they are added to the DOM.\n\n### Attributes\n\nThe Enter component takes the following attributes:\n\n#### `css`\n\nThe css overrides the element should have *before* it begins to appear. This can also be a function, allowing you to defer the decision until right before the animation starts.\n\nDefault: `{}`\n\n#### `time`\n\nThe duration of the transition in milliseconds.\n\nDefault: `300`.\n\n#### `easing`\n\nA string with the [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) of the transition.\n\nDefault: `\"linear\"`.\n\n#### `delay`\n\nWait this amount of milliseconds before starting the transition.\n\nDefault: `0`.\n\n### Example:\n\n```jsx\n//make messages pop and fade in:\n\u003cEnter time={200} easing=\"ease-in-out\" css={{\n    opacity: \"0\",\n    transform: \"scale(0.1, 0.1)\",\n}}\u003e\n    \u003cp class=\"message\"\u003esome message\u003c/p\u003e\n\u003c/Enter\u003e\n```\n\n## Exit\n\nUse the Exit component to animate out elements before they are removed from the DOM.\n\n### Attributes: \n\nThe Exit component takes the following attributes:\n\n#### `css`\n\nThe css overrides the element should have *after* it has left. This can also be a function, allowing you to defer the decision until right before the animation starts.\n\nDefault: `{}`\n\n#### `time`\n\nThe duration of the transition in milliseconds.\n\nDefault: `300`.\n\n#### `easing`\n\nA string with the [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) of the transition.\n\nDefault: `\"linear\"`\n\n#### `delay`\n\nWait this amount of milliseconds before beginning the transition.\n\nDefault: `0`.\n\n#### `keep`\n\nWhen composing multiple Exit-transition components, set this to `true` on all but the last one, in order to prevent previous ones from removing the element when complete.\n\nDefault: `false`.\n\n### Example:\n\n```jsx\n//make messages slide and fade out, and change backgroundcolor\n\u003cExit time={200} easing=\"ease-in-out\" css={{\n    transform: \"translateY(-100%)\",\n    opacity: \"0\",\n}}\u003e\n    \u003cp class=\"message\"\u003esome message\u003c/p\u003e\n\u003c/Exit\u003e\n```\n\n## Move\n\nWhen the order of sibling nodes (items in a list, for example) changes, their elements are laid out in new positions on the page. When the sibling nodes are wrapped with the `Move` transition-component, they will glide smoothly to their new positions.\n\nRemember to key the nodes you wish to apply the `Move` transition to, so that the vdom engine is able to detct that it is the *order* that has changed, and not just all the attributes.\n\n### Attributes:\n\nThe `Move` component takes the following attributes:\n\n#### `time`\n\nThe duration of the transition in milliseconds.\n\nDefault: `300`.\n\n#### `easing`\n\nA string with the [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) of the transition.\n\nDefault: `\"linear\"`.\n\n### Example:\n\n```jsx\n\n\u003cul class=\"todo-list\"\u003e\n    \u003cMove time={200} easing=\"ease-in-out\"\u003e\n    {state.todos.map(todo =\u003e (\n        \u003cli class=\"todo-item\" key={todo.id}\u003e\n            ...\n        \u003c/li\u003e\n    ))}\n    \u003c/Move\u003e\n\u003c/ul\u003e\n```\n\n## Composing Transitions\n\nThe transition components work by adding handlers for the `oncreate`, `onremove` and/or `onupdate` lifecycle events to their children. If a child already has a handler for those lifecycle events, it is not overwritten. Rather, we compose the transition-handlers with existing lifecycle event handlers.\n\nThis makes it possible to compose multiple transition components on top of eachother.\n\n### Example:\n\n```jsx\nconst FadeInPopOut = (props, children) =\u003e (\n    \u003cEnter css={{opacity: \"0\"}}\u003e\n        \u003cExit css={{opacity: \"0\", transform: \"scale(2.0,2.0)\"}}\u003e\n            {children}\n        \u003c/Exit\u003e\n    \u003c/Enter\u003e\n)\n```\n\n## Keys\n\nAs a general rule: make sure to have keys on all nodes you apply transitions to.\n\nThe lifecycle events which trigger the transitions, are based on *elements* - not virtual nodes. Without keys, Hyperapp's virtual DOM engine will often associate the a nodes with an unintended element in the real DOM, with unexpected transition-behavior as a consequence.\n\n\n## Examples\n\nPlease have a look at these live, editable examples, for some ideas of what is possible:\n\n- **[Toasts](https://codepen.io/zaceno/pen/QOYOZd)** - Combining Enter, Exit and Move transitions for an elegant notification display.\n- **[15-puzzle](https://codepen.io/zaceno/pen/XzOwPd)** - Slide squares around a grid using the Move transition\n- **[Carousel](https://codepen.io/zaceno/pen/ZawNmb)** - A situation you'll need deferred css for the Exit transition.\n\n## Bugs \u0026 Questions\n\nDo you have questions? Or think you've found a bug? Please file an issue att https://github.com/hyperapp/transitions\n\nOr come join the us on the [Hyperapp Slack](https://hyperappjs.herokuapp.com)!\n\n## License\n\nHyperapp Transitions is MIT licensed. See [LICENSE](LICENSE.md).\n","funding_links":[],"categories":["JavaScript","Utilities V1"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzaceno%2Fhyperapp-transitions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzaceno%2Fhyperapp-transitions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzaceno%2Fhyperapp-transitions/lists"}