jQuery Plugin For CSS3 Transforms and Transitions - Transit
File Size: | 18.2 KB |
---|---|
Views Total: | 6244 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Transit is a simple and easy-to-use jQuery plugin that allows you to do smooth CSS transforms and transitions in jQuery. The also provides a 3rd parameter to support easing types.
Features:
- Animate anything:Transition any CSS property
- 2D transforms: translate, rotate, scale, skew
- 3D transforms: rotate x, rotate y, rotate 3d\
- Supported easing types: linear, ease, in, out, in-out, snap, easeOutCubic, easeInOutCubic, easeInCirc, easeOutCirc, easeInOutCirc, easeInExpo, easeOutExpo, easeInOutExpo, easeInQuad, easeOutQuad, easeInOutQuad, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInBack, easeOutBack, easeInOutBack
Basic Usage:
1. Include jQuery library and jQuery Transit on your webpage
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.transit.js"></script>
2. The html
<div class="box"></div>
3. The javascript
$('.box').transition({ x: '40px', y: '40px' });
Change log:
v0.9.12 (2014-07-17)
- Fix browserify builds by using the correct jQuery.
- Fix properties resetting after a transition.
v0.9.11 (2014-06-23)
- Add support for scaleX and scaleY.
- Add support for npm.
- Add support for RequireJS and CommonJS.
- Fix transitionend support for IE10, Chrome, and many others.
- Fix .transition({...}, {queue: false}) not being honored.
- Remove some redundant code.
- Docs: Update to support the new docco.
- Add easeInCubic easing.
- Add test cases for jQuery 2.0+.
This awesome jQuery plugin is developed by rstacruz. For more Advanced Usages, please check the demo page or visit the official website.