{"id":13426861,"url":"https://github.com/rstacruz/jquery.transit","last_synced_at":"2025-04-25T14:48:22.056Z","repository":{"id":1837853,"uuid":"2762270","full_name":"rstacruz/jquery.transit","owner":"rstacruz","description":"Super-smooth CSS3 transformations and transitions for jQuery","archived":false,"fork":false,"pushed_at":"2022-01-18T08:56:25.000Z","size":1833,"stargazers_count":7277,"open_issues_count":136,"forks_count":858,"subscribers_count":250,"default_branch":"master","last_synced_at":"2025-03-27T20:48:46.254Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://ricostacruz.com/jquery.transit","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"fog/fog-core","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rstacruz.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-11-12T15:56:45.000Z","updated_at":"2025-03-21T06:10:24.000Z","dependencies_parsed_at":"2022-08-20T10:20:33.846Z","dependency_job_id":null,"html_url":"https://github.com/rstacruz/jquery.transit","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstacruz%2Fjquery.transit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstacruz%2Fjquery.transit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstacruz%2Fjquery.transit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rstacruz%2Fjquery.transit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rstacruz","download_url":"https://codeload.github.com/rstacruz/jquery.transit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245924493,"owners_count":20694728,"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":[],"created_at":"2024-07-31T00:01:46.943Z","updated_at":"2025-04-01T23:19:25.778Z","avatar_url":"https://github.com/rstacruz.png","language":"JavaScript","readme":"# [jQuery Transit](http://ricostacruz.com/jquery.transit)\n#### Super-smooth CSS3 transformations and transitions for jQuery\n\njQuery Transit is a plugin for to help you do CSS transformations and \ntransitions in jQuery.\n\nRefer to the [jQuery Transit website](http://ricostacruz.com/jquery.transit) for \nexamples.\n\nUsage\n-----\n\nJust include [jquery.transit.js] after jQuery. Requires jQuery 1.4+.\n\n``` html\n\u003cscript src='jquery.js'\u003e\u003c/script\u003e\n\u003cscript src='jquery.transit.js'\u003e\u003c/script\u003e\n```\n\nIt is also available via [bower] and [npm].\n\n    $ bower install --save jquery.transit\n    $ npm install --save jquery.transit\n\n[bower]: http://bower.io/search/?q=jquery.transit\n[npm]: http://npmjs.org/package/jquery.transit\n[jquery.transit.js]: https://github.com/rstacruz/jquery.transit/blob/master/jquery.transit.js\n\nTransformations\n---------------\n\nYou can set transformations as you would any CSS property in jQuery.\n(Note that you cannot `$.fn.animate()` them, only set them.)\n\n``` javascript\n$(\"#box\").css({ x: '30px' });               // Move right\n$(\"#box\").css({ y: '60px' });               // Move down\n$(\"#box\").css({ translate: [60,30] });      // Move right and down\n$(\"#box\").css({ rotate: '30deg' });         // Rotate clockwise\n$(\"#box\").css({ scale: 2 });                // Scale up 2x (200%)\n$(\"#box\").css({ scale: [2, 1.5] });         // Scale horiz and vertical\n$(\"#box\").css({ skewX: '30deg' });          // Skew horizontally\n$(\"#box\").css({ skewY: '30deg' });          // Skew vertical\n$(\"#box\").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation\n$(\"#box\").css({ rotateY: 30 });\n$(\"#box\").css({ rotate3d: [1, 1, 0, 45] });\n```\n\nRelative values are supported.\n\n``` javascript\n$(\"#box\").css({ rotate: '+=30' });          // 30 degrees more\n$(\"#box\").css({ rotate: '-=30' });          // 30 degrees less\n```\n\nAll units are optional.\n\n``` javascript\n$(\"#box\").css({ x: '30px' });\n$(\"#box\").css({ x: 30 });\n```\n\nMultiple arguments can be commas or an array.\n\n``` javascript\n$(\"#box\").css({ translate: [60,30] });\n$(\"#box\").css({ translate: ['60px','30px'] });\n$(\"#box\").css({ translate: '60px,30px' });\n```\n\nGetters are supported. (Getting properties with multiple arguments returns\narrays.)\n\n``` javascript\n$(\"#box\").css('rotate');     //=\u003e \"30deg\"\n$(\"#box\").css('translate');  //=\u003e ['60px', '30px']\n```\n\nAnimating - `$.fn.transition`\n-----------------------------\n\n    $('...').transition(options, [duration], [easing], [complete])\n\nYou can animate with CSS3 transitions using `$.fn.transition()`. It works \nexactly like `$.fn.animate()`, except it uses CSS3 transitions.\n\n``` javascript\n$(\"#box\").transition({ opacity: 0.1, scale: 0.3 });\n$(\"#box\").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // duration\n$(\"#box\").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // easing\n$(\"#box\").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // duration+easing\n$(\"#box\").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // callback\n$(\"#box\").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // everything\n```\n\nYou can also pass *duration* and *easing* and *complete* as values in `options`, just like in `$.fn.animate()`.\n\n``` javascript\n$(\"#box\").transition({\n  opacity: 0.1, scale: 0.3,\n  duration: 500,\n  easing: 'in',\n  complete: function() { /* ... */ }\n});\n```\n\nTests\n-----\n\nTransit has a unique test suite. Open `test/index.html` to see it. When \ncontibuting fixes, be sure to test this out with different jQuery versions and \ndifferent browsers.\n\nAlternatives\n------------\n\n__[Velocity.js](https://velocityjs.org)__ (recommended!)\n\n * Pros: optimized for situations with hundreds of simultaneous transitions. Lots of extra features.\n\n__[Move.js](https://github.com/visionmedia/move.js)__\n\n * Pros: no jQuery dependency, great syntax.\n * Cons (at time of writing): no iOS support (doesn't use `translate3d`), some\n   IE bugs, no 3D transforms, no animation queue.\n\n__[jQuery animate \nenhanced](https://github.com/benbarnett/jQuery-Animate-Enhanced)__\n\n* Pros: transparently overrides `$.fn.animate()` to provide CSS transitions \n  support.\n* Cons: transparently overrides `$.fn.animate()`. No transformations support.\n\n__[jQuery 2D transformations](https://github.com/heygrady/transform/)__\n\n* Pros: Tons of transformations.\n* Cons: No CSS transition support; animates via `fx.step`.\n\n__[jQuery CSS3 rotate](http://plugins.jquery.com/project/Rotate)__\n\n* Pros: simply provides rotation.\n* Cons: simply provides rotation. No transitions support.\n\nSupport\n-------\n\n__Bugs and requests__: submit them through the project's issues tracker.\u003cbr\u003e\n[![Issues](http://img.shields.io/github/issues/rstacruz/jquery.transit.svg)]( https://github.com/rstacruz/jquery.transit/issues )\n\n__Questions__: ask them at StackOverflow with the tag *jquery-transit*.\u003cbr\u003e\n[![StackOverflow](http://img.shields.io/badge/stackoverflow-jquery--transit-brightgreen.svg)]( http://stackoverflow.com/questions/tagged/jquery-transit )\n\n__Chat__: join us at gitter.im.\u003cbr\u003e\n[![Chat](http://img.shields.io/badge/gitter-rstacruz / jquery.transit-brightgreen.svg)]( https://gitter.im/rstacruz/jquery.transit )\n\nThanks\n------\n\n**jQuery Transit** © 2011-2014+, Rico Sta. Cruz. Released under the [MIT License].\u003cbr\u003e\nAuthored and maintained by Rico Sta. Cruz with help from [contributors].\n\n\u003e [ricostacruz.com](http://ricostacruz.com) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e GitHub [@rstacruz](https://github.com/rstacruz) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e Twitter [@rstacruz](https://twitter.com/rstacruz)\n\n[MIT License]: http://mit-license.org/\n[contributors]: http://github.com/rstacruz/jquery.transit/contributors\n\n[![npm version](https://img.shields.io/npm/v/jquery.transit.png)](https://npmjs.org/package/jquery.transit \"View this project on npm\")\n","funding_links":[],"categories":["JavaScript","Animations","Animations [🔝](#readme)","16. 动画(Animate) ##","动画","JavaScript Libs","16. 动画(Animate)","Animation"],"sub_categories":["Other","13.20 视差滚动(Parallax Scrolling) ###","其它","Animation","13.20 视差滚动(Parallax Scrolling)","Miscellaneous Resources"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstacruz%2Fjquery.transit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frstacruz%2Fjquery.transit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frstacruz%2Fjquery.transit/lists"}