{"id":19066509,"url":"https://github.com/geut/mithril-transition","last_synced_at":"2025-06-25T06:38:31.465Z","repository":{"id":57298456,"uuid":"42112767","full_name":"geut/mithril-transition","owner":"geut","description":"A lightweight library for MithrilJS to create your own custom transitions based on the lifecycle of your components.","archived":false,"fork":false,"pushed_at":"2017-12-27T22:38:58.000Z","size":199,"stargazers_count":39,"open_issues_count":2,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-28T12:42:11.857Z","etag":null,"topics":["animations","library","mithril","transition"],"latest_commit_sha":null,"homepage":"https://geut.github.io/mithril-transition/","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/geut.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-08T13:09:09.000Z","updated_at":"2024-06-02T08:51:15.000Z","dependencies_parsed_at":"2022-09-05T17:00:27.282Z","dependency_job_id":null,"html_url":"https://github.com/geut/mithril-transition","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geut%2Fmithril-transition","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geut%2Fmithril-transition/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geut%2Fmithril-transition/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geut%2Fmithril-transition/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geut","download_url":"https://codeload.github.com/geut/mithril-transition/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geut%2Fmithril-transition/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":258803447,"owners_count":22760441,"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","library","mithril","transition"],"created_at":"2024-11-09T00:57:08.195Z","updated_at":"2025-06-25T06:38:31.441Z","avatar_url":"https://github.com/geut.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mithril-transition\n[![Build Status](https://travis-ci.org/geut/mithril-transition.svg?branch=master)](https://travis-ci.org/geut/mithril-transition)\n\u003e A lightweight library for MithrilJS to create your own custom transitions based on the lifecycle of your components.\n\n![mithril-transition](https://cloud.githubusercontent.com/assets/819446/24215837/d6593170-0f18-11e7-8458-ccffbb1ce18b.gif)\n\n**NOTE:** This package was updated for the rewrite of Mithril, if you are looking\nfor the old and unmaintained package can be found it\n[here](https://github.com/geut/mithril-transition/tree/v0.2)\n\n## Install\n\nWith [npm](https://npmjs.com/package/mithril-transition) and [browserify](https://www.npmjs.com/package/browserify)/[webpack](https://www.npmjs.com/package/webpack) do:\n\n```\nnpm install --save mithril-transition\n```\n\nOr you can use the UMD bundle\n\n```html\n\u003cscript src=\"/lib/mithril-transition/dist/mithril-transition.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n\n## How to use it\n\n**mithril-transition** is a function factory that returns an `object` with an `oncreate` and `onremove` hooks to add in the vnode lifecycle (where you want animate it) of mithril.\n\nCheck our live **[example](https://geut.github.io/mithril-transition/example)**\n\n## Functions\n\n#### createTransition(options = {}) -\u003e {transition}\nFactory function to create a new transition. The options are defined below.\n\n#### transition.oncreate(vnode)\nFunction that you need hook up to the lifecycle of the vnode\n\n#### transition.onremove(vnode)\nFunction that you need hook up to the lifecycle of the vnode\n\n#### transition.enable()\nMethod to enable the animation. **By default is enabled.**\n\n#### transition.disable()\nMethod to disable the animation.\n\n## Options\n\n#### animation (required)\nCallback function where you define the animation for the next/prev component.\n\nThe callback has an object argument {} with the next properties:\n\n**lastElm**: The last DOM element that is removing.\n\n**nextElm**: The new DOM element that is inserting.\n\n**direction**: This option allow to you define differents animations based of next/prev direction of the lifecycle components. Is required have at least ```useHistory``` in true.\n\n**cbLast**: Callback to complete the remove of the lastElm. (is required call it)\n\n**cbNext**: Callback to complete the insert of the nextElm. (is required call it)\n\n#### useHistory (default = true)\nWhen is enabled the library keep the history of your components, to know if the next element in the transition is really the next element or a prev element.\n\n#### persistHistoryAs ({string} default = null)\nSave the history in the sessionStorage identified by a key.\n\n#### classList ({object})\nBefore that the transition begin, the library set a list of classes for each parent|element and remove it when the transition is finished.\n```javascript\ndefault = {\n    parent: 'm-transition-parent',\n    lastElem: 'm-transition-last-element',\n    newElem: 'm-transition-next-element',\n    direction: 'm-transition-\u003cdirection\u003e'\n}\n```\n\n## On roadmap\n\n- Add unit tests\n\n## Credits\n\n* Thanks to @dpaez to work with me the last year in a mobile project using [Mithril](http://mithril.js.org/) and exploring how to make transitions and animations with this excellent \"MVC\" framework.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeut%2Fmithril-transition","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeut%2Fmithril-transition","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeut%2Fmithril-transition/lists"}