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
   
jQuery Plugin For CSS3 Transforms and Transitions - Transit

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.