BIG BIG BIG update
V0 of first interface going to refactor JS
This commit is contained in:
Bachir Soussi Chiadmi
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "jquery.transit",
|
||||
"repo": "rstacruz/jquery.transit",
|
||||
"description": "Smooth CSS3 transitions and transformations for jQuery.",
|
||||
"version": "0.9.12",
|
||||
"keywords": [
|
||||
"css3",
|
||||
"animation",
|
||||
"transition"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": "*"
|
||||
},
|
||||
"development": {},
|
||||
"license": "MIT",
|
||||
"main": "jquery.transit.js",
|
||||
"homepage": "https://github.com/rstacruz/jquery.transit",
|
||||
"_release": "0.9.12",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v0.9.12",
|
||||
"commit": "209c4831155479a3446e08e2c39d6eb275893b34"
|
||||
},
|
||||
"_source": "git://github.com/rstacruz/jquery.transit.git",
|
||||
"_target": "~0.9.12",
|
||||
"_originalSource": "jquery.transit",
|
||||
"_direct": true
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
site
|
||||
@@ -0,0 +1,128 @@
|
||||
# Contributing to Transit
|
||||
|
||||
Want to get involved? Thanks! There are plenty of ways to help!
|
||||
|
||||
## Reporting issues
|
||||
|
||||
A bug is a _demonstrable problem_ that is caused by the code in the
|
||||
repository.
|
||||
|
||||
Please read the following guidelines before you [report an issue][issues]:
|
||||
|
||||
1. **Use the GitHub issue search** — check if the issue has already been
|
||||
reported. If it has been, please comment on the existing issue.
|
||||
|
||||
2. **Check if the issue has been fixed** — the latest `master` or
|
||||
development branch may already contain a fix.
|
||||
|
||||
3. **Isolate the demonstrable problem** — make sure that the code in the
|
||||
project's repository is _definitely_ responsible for the issue. Create a
|
||||
[reduced test case](http://css-tricks.com/6263-reduced-test-cases/) - an
|
||||
extremely simple and immediately viewable example of the issue.
|
||||
|
||||
4. **Include a live example** — provide a link to your reduced test case
|
||||
when appropriate (e.g. if the issue is related to (front-end technologies).
|
||||
Please use [jsFiddle](http://jsfiddle.net) to host examples.
|
||||
|
||||
Please try to be as detailed as possible in your report too. What is your
|
||||
environment? What steps will reproduce the issue? What browser(s) and OS
|
||||
experience the problem? What would you expect to be the outcome? All these
|
||||
details will help people to assess and fix any potential bugs.
|
||||
|
||||
### Example of a good bug report:
|
||||
|
||||
> Short and descriptive title
|
||||
>
|
||||
> A summary of the issue and the browser/OS environment in which it occurs. If
|
||||
> suitable, include the steps required to reproduce the bug.
|
||||
>
|
||||
> 1. This is the first step
|
||||
> 2. This is the second step
|
||||
> 3. Further steps, etc.
|
||||
>
|
||||
> `<url>` (a link to the reduced test case)
|
||||
>
|
||||
> Any other information you want to share that is relevant to the issue being
|
||||
> reported. This might include the lines of code that you have identified as
|
||||
> causing the bug, and potential solutions (and your opinions on their
|
||||
> merits).
|
||||
|
||||
A good bug report shouldn't leave people needing to chase you up to get further
|
||||
information that is required to assess or fix the bug.
|
||||
|
||||
**[File a bug report][issues]**
|
||||
|
||||
## Responding to issues
|
||||
|
||||
Feel free to respond to other people's issues! Some people may be reporting
|
||||
issues that can easily be solved even without modification to the project's
|
||||
code.
|
||||
|
||||
You can also help by verifying issues reported.
|
||||
|
||||
**[View issues][issues]**
|
||||
|
||||
## The 'help wanted' tag
|
||||
|
||||
Some [issues] are tagged with the 'help wanted' tag. These issues often:
|
||||
|
||||
- are missing an actual implementation, or
|
||||
- need people's help in verifying and replicating the issue, or
|
||||
- need test cases.
|
||||
|
||||
If you would like to contribute code and don't have any specific issue you want
|
||||
to fix, this would be a good place to start looking at!
|
||||
|
||||
**[View issues][issues]**
|
||||
|
||||
## Pull requests
|
||||
|
||||
Good pull requests — patches, improvements, new features — are a fantastic
|
||||
help. They should remain focused in scope and avoid containing unrelated
|
||||
commits.
|
||||
|
||||
If your contribution involves a significant amount of work or substantial
|
||||
changes to any part of the project, please open an issue to discuss it first.
|
||||
|
||||
Please follow this process; it's the best way to get your work included in the
|
||||
project:
|
||||
|
||||
1. [Fork](http://help.github.com/fork-a-repo/) the project.
|
||||
|
||||
2. Clone your fork (`git clone
|
||||
https://github.com/<your-username>/html5-boilerplate.git`).
|
||||
|
||||
3. Add an `upstream` remote (`git remote add upstream
|
||||
https://github.com/rstacruz/jquery.transit.git`).
|
||||
|
||||
4. Get the latest changes from upstream (e.g. `git pull upstream
|
||||
<dev-branch>`).
|
||||
|
||||
5. Create a new topic branch to contain your feature, change, or fix (`git
|
||||
checkout -b <topic-branch-name>`).
|
||||
|
||||
6. Make sure that your changes adhere to the current coding conventions used
|
||||
throughout the project - indentation, accurate comments, etc. Please update
|
||||
any documentation that is relevant to the change you are making.
|
||||
|
||||
7. Commit your changes in logical chunks; use git's [interactive
|
||||
rebase](https://help.github.com/articles/interactive-rebase) feature to tidy
|
||||
up your commits before making them public. Please adhere to these [git commit
|
||||
message
|
||||
guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
|
||||
or your pull request is unlikely be merged into the main project.
|
||||
|
||||
8. Locally merge (or rebase) the upstream branch into your topic branch.
|
||||
|
||||
9. Push your topic branch up to your fork (`git push origin
|
||||
<topic-branch-name>`).
|
||||
|
||||
10. [Open a Pull Request](http://help.github.com/send-pull-requests/) with a
|
||||
clear title and description. Please mention which browsers you tested in.
|
||||
|
||||
## Acknowledgements
|
||||
|
||||
This contributing guide has been adapted from [HTML5 boilerplate's guide][g].
|
||||
|
||||
[g]: https://github.com/h5bp/html5-boilerplate/blob/master/CONTRIBUTING.md
|
||||
[issues]: https://github.com/rstacruz/jquery.transit/issues/
|
||||
@@ -0,0 +1,89 @@
|
||||
## v0.9.12 - July 17, 2014
|
||||
|
||||
* Fix browserify builds by using the correct jQuery. (@dminkovsky, #201)
|
||||
* Fix properties resetting after a transition. (#204, #205)
|
||||
|
||||
## v0.9.11 - June 23, 2014
|
||||
|
||||
* Add support for `scaleX` and `scaleY`. (@YousefED, #192)
|
||||
* Add support for npm.
|
||||
* Add support for RequireJS and CommonJS.
|
||||
* Fix transitionend support for IE10, Chrome, and many others. (@wambotron, #103)
|
||||
|
||||
Also:
|
||||
|
||||
* Fix `.transition({...}, {queue: false})` not being honored. (@YousefED, #192)
|
||||
* Remove some redundant code. (@Bongo, #165)
|
||||
* Docs: Update to support the new docco. (@francismakes, #175)
|
||||
* Add `easeInCubic` easing. (@emagnier, @willblackmore, #161, #142)
|
||||
* Add test cases for jQuery 2.0+. (@hankhero, #155)
|
||||
|
||||
The version `0.9.10` was not officially released as it was published prematurely
|
||||
to npm.
|
||||
|
||||
## v0.9.9 - Dec 14, 2012
|
||||
|
||||
Many, many thanks to the many [contributors] who made this release happen! This
|
||||
is a pre-release of 1.0.
|
||||
|
||||
### Fixes and additions:
|
||||
|
||||
* Fix support for jQuery 1.8, IE 10, Firefox 16, Android Jellybean.
|
||||
(#48, #62, #63, #69, #70, #71, #72, #76, #77, #80, #81, #82, #85, #86, #90, #92, #93)
|
||||
* Compatibility with Twitter Bootstrap has been fixed. (#67)
|
||||
* Unprefixed CSS properties are now used if your browser supports them.
|
||||
* Account for prefix-free transition end for Mozilla. (#97)
|
||||
* Callbacks should now be called even if duration is `0`. (#37)
|
||||
* Doing `.css('transition', 'transform 1s')` should now properly vendor-prefix 'transform'. (#84)
|
||||
* Added Penner easing splines. (#44)
|
||||
|
||||
### Internal fixes:
|
||||
|
||||
* New test suite.
|
||||
* In building the website, use `fl-rocco` instead of `docco`. This removes the dependency. (#50)
|
||||
|
||||
## v0.1.3 - Feb 14, 2012
|
||||
|
||||
### Fixed:
|
||||
* Fix JS error with undefined `next` function. (#21)
|
||||
* Using `delay: 0` now works. Closes (#20)
|
||||
* More robust checking of 3D transition support. (#19)
|
||||
* Stop rotateX/rotateY/etc from stopping other transitions when it's not
|
||||
supported. (#15)
|
||||
|
||||
### Added:
|
||||
* Support Firefox 10 3D transitions. (#19)
|
||||
|
||||
### Changed:
|
||||
* Allow disabling using the transitionEnd property.
|
||||
(`$.transit.useTransitionEnd = true`)
|
||||
* Use the more reliable timers by default. (`useTransitionEnd` now defaults to
|
||||
`false`)
|
||||
|
||||
## v0.1.2 - Jan 24, 2012
|
||||
|
||||
Thanks to code contributors @ppcano, @jeduan, @steckel, @weotch, and everyone
|
||||
who reported issues.
|
||||
|
||||
### Fixed:
|
||||
* IE8 error about .indexOf. (#12, #8)
|
||||
* Fix z-layer scaling in Safari. (#9, #10)
|
||||
* Fix scale elements being unclickable in WebKits. (#9, #10)
|
||||
* Fix support for `queue: false`. (#13)
|
||||
* Clean up transitions when done. (#14)
|
||||
* Fix disappearing scaled elements in Chrome. (#11)
|
||||
* Fix a bug where the default duration and easing can sometimes not be used.
|
||||
|
||||
### Changed:
|
||||
* Make code compatible with jsHint. (#6)
|
||||
|
||||
## v0.1.1 - Nov 18, 2011
|
||||
|
||||
### Fixed:
|
||||
* Only animate what is needed (ie, don't use 'transition-property: all').
|
||||
|
||||
## v0.1.0 - Nov 14, 2011
|
||||
|
||||
Initial official release.
|
||||
|
||||
[contributors]: https://github.com/rstacruz/jquery.transit/contributors
|
||||
@@ -0,0 +1,36 @@
|
||||
Developer notes
|
||||
===============
|
||||
|
||||
Testing:
|
||||
|
||||
open test/index.html
|
||||
|
||||
Making a new release:
|
||||
|
||||
vim HISTORY.md # update changelog
|
||||
bump *.json *.js # update version number
|
||||
npm publish # release to npm
|
||||
git release v1.0.0 # release to github/bower
|
||||
cd site && make # update the site
|
||||
|
||||
Managing the site
|
||||
-----------------
|
||||
|
||||
Make `site/`:
|
||||
|
||||
git clone git@github.com:rstacruz/jquery.transit.git -b gh-pages ./site
|
||||
|
||||
Update:
|
||||
|
||||
cd site
|
||||
make update # update from files
|
||||
make # update the site
|
||||
make dist # make dist/ files (uh, should be deprecated)
|
||||
|
||||
v1.0.0 to do
|
||||
------------
|
||||
|
||||
* .transitionStop()
|
||||
* use transitionend by default (#184)
|
||||
* Update bootstrap compatibility (#143, #67)
|
||||
* Redesign the site
|
||||
@@ -0,0 +1,169 @@
|
||||
# [jQuery Transit](http://ricostacruz.com/jquery.transit)
|
||||
#### Super-smooth CSS3 transformations and transitions for jQuery
|
||||
|
||||
jQuery Transit is a plugin for to help you do CSS transformations and
|
||||
transitions in jQuery.
|
||||
|
||||
Refer to the [jQuery Transit website](http://ricostacruz.com/jquery.transit) for
|
||||
examples.
|
||||
|
||||
Usage
|
||||
-----
|
||||
|
||||
Just include [jquery.transit.js] after jQuery. Requires jQuery 1.4+.
|
||||
|
||||
``` html
|
||||
<script src='jquery.js'></script>
|
||||
<script src='jquery.transit.js'></script>
|
||||
```
|
||||
|
||||
It is also available via [bower] and [npm].
|
||||
|
||||
$ bower install --save jquery.transit
|
||||
$ npm install --save jquery.transit
|
||||
|
||||
[bower]: http://bower.io/search/?q=jquery.transit
|
||||
[npm]: http://npmjs.org/package/jquery.transit
|
||||
[jquery.transit.js]: https://github.com/rstacruz/jquery.transit/blob/master/jquery.transit.js
|
||||
|
||||
Transformations
|
||||
---------------
|
||||
|
||||
You can set transformations as you would any CSS property in jQuery.
|
||||
(Note that you cannot `$.fn.animate()` them, only set them.)
|
||||
|
||||
``` javascript
|
||||
$("#box").css({ x: '30px' }); // Move right
|
||||
$("#box").css({ y: '60px' }); // Move down
|
||||
$("#box").css({ translate: [60,30] }); // Move right and down
|
||||
$("#box").css({ rotate: '30deg' }); // Rotate clockwise
|
||||
$("#box").css({ scale: 2 }); // Scale up 2x (200%)
|
||||
$("#box").css({ scale: [2, 1.5] }); // Scale horiz and vertical
|
||||
$("#box").css({ skewX: '30deg' }); // Skew horizontally
|
||||
$("#box").css({ skewY: '30deg' }); // Skew vertical
|
||||
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
|
||||
$("#box").css({ rotateY: 30 });
|
||||
$("#box").css({ rotate3d: [1, 1, 0, 45] });
|
||||
```
|
||||
|
||||
Relative values are supported.
|
||||
|
||||
``` javascript
|
||||
$("#box").css({ rotate: '+=30' }); // 30 degrees more
|
||||
$("#box").css({ rotate: '-=30' }); // 30 degrees less
|
||||
```
|
||||
|
||||
All units are optional.
|
||||
|
||||
``` javascript
|
||||
$("#box").css({ x: '30px' });
|
||||
$("#box").css({ x: 30 });
|
||||
```
|
||||
|
||||
Multiple arguments can be commas or an array.
|
||||
|
||||
``` javascript
|
||||
$("#box").css({ translate: [60,30] });
|
||||
$("#box").css({ translate: ['60px','30px'] });
|
||||
$("#box").css({ translate: '60px,30px' });
|
||||
```
|
||||
|
||||
Getters are supported. (Getting properties with multiple arguments returns
|
||||
arrays.)
|
||||
|
||||
``` javascript
|
||||
$("#box").css('rotate'); //=> "30deg"
|
||||
$("#box").css('translate'); //=> ['60px', '30px']
|
||||
```
|
||||
|
||||
Animating - `$.fn.transition`
|
||||
-----------------------------
|
||||
|
||||
$('...').transition(options, [duration], [easing], [complete])
|
||||
|
||||
You can animate with CSS3 transitions using `$.fn.transition()`. It works
|
||||
exactly like `$.fn.animate()`, except it uses CSS3 transitions.
|
||||
|
||||
``` javascript
|
||||
$("#box").transition({ opacity: 0.1, scale: 0.3 });
|
||||
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500); // duration
|
||||
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast'); // easing
|
||||
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in'); // duration+easing
|
||||
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..}); // callback
|
||||
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..}); // everything
|
||||
```
|
||||
|
||||
You can also pass *duration* and *easing* and *complete* as values in `options`, just like in `$.fn.animate()`.
|
||||
|
||||
``` javascript
|
||||
$("#box").transition({
|
||||
opacity: 0.1, scale: 0.3,
|
||||
duration: 500,
|
||||
easing: 'in',
|
||||
complete: function() { /* ... */ }
|
||||
});
|
||||
```
|
||||
|
||||
Tests
|
||||
-----
|
||||
|
||||
Transit has a unique test suite. Open `test/index.html` to see it. When
|
||||
contibuting fixes, be sure to test this out with different jQuery versions and
|
||||
different browsers.
|
||||
|
||||
Alternatives
|
||||
------------
|
||||
|
||||
__[Velocity.js](https://velocityjs.org)__ (recommended!)
|
||||
|
||||
* Pros: optimized for situations with hundreds of simultaneous transitions. Lots of extra features.
|
||||
|
||||
__[Move.js](https://github.com/visionmedia/move.js)__
|
||||
|
||||
* Pros: no jQuery dependency, great syntax.
|
||||
* Cons (at time of writing): no iOS support (doesn't use `translate3d`), some
|
||||
IE bugs, no 3D transforms, no animation queue.
|
||||
|
||||
__[jQuery animate
|
||||
enhanced](https://github.com/benbarnett/jQuery-Animate-Enhanced)__
|
||||
|
||||
* Pros: transparently overrides `$.fn.animate()` to provide CSS transitions
|
||||
support.
|
||||
* Cons: transparently overrides `$.fn.animate()`. No transformations support.
|
||||
|
||||
__[jQuery 2D transformations](https://github.com/heygrady/transform/)__
|
||||
|
||||
* Pros: Tons of transformations.
|
||||
* Cons: No CSS transition support; animates via `fx.step`.
|
||||
|
||||
__[jQuery CSS3 rotate](http://plugins.jquery.com/project/Rotate)__
|
||||
|
||||
* Pros: simply provides rotation.
|
||||
* Cons: simply provides rotation. No transitions support.
|
||||
|
||||
Support
|
||||
-------
|
||||
|
||||
__Bugs and requests__: submit them through the project's issues tracker.<br>
|
||||
[]( https://github.com/rstacruz/jquery.transit/issues )
|
||||
|
||||
__Questions__: ask them at StackOverflow with the tag *jquery-transit*.<br>
|
||||
[]( http://stackoverflow.com/questions/tagged/jquery-transit )
|
||||
|
||||
__Chat__: join us at gitter.im.<br>
|
||||
[]( https://gitter.im/rstacruz/jquery.transit )
|
||||
|
||||
Thanks
|
||||
------
|
||||
|
||||
**jQuery Transit** © 2011-2014+, Rico Sta. Cruz. Released under the [MIT License].<br>
|
||||
Authored and maintained by Rico Sta. Cruz with help from [contributors].
|
||||
|
||||
> [ricostacruz.com](http://ricostacruz.com) ·
|
||||
> GitHub [@rstacruz](https://github.com/rstacruz) ·
|
||||
> Twitter [@rstacruz](https://twitter.com/rstacruz)
|
||||
|
||||
[MIT License]: http://mit-license.org/
|
||||
[contributors]: http://github.com/rstacruz/jquery.transit/contributors
|
||||
|
||||
[](https://npmjs.org/package/jquery.transit "View this project on npm")
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "jquery.transit",
|
||||
"repo": "rstacruz/jquery.transit",
|
||||
"description": "Smooth CSS3 transitions and transformations for jQuery.",
|
||||
"version": "0.9.12",
|
||||
"keywords": [
|
||||
"css3",
|
||||
"animation",
|
||||
"transition"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": "*"
|
||||
},
|
||||
"development": {},
|
||||
"license": "MIT",
|
||||
"main": "jquery.transit.js"
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "jquery.transit",
|
||||
"repo": "rstacruz/jquery.transit",
|
||||
"description": "Smooth CSS3 transitions and transformations for jQuery.",
|
||||
"version": "0.9.12",
|
||||
"keywords": [
|
||||
"css3",
|
||||
"animation",
|
||||
"transition"
|
||||
],
|
||||
"dependencies": {
|
||||
"component/jquery": "*"
|
||||
},
|
||||
"development": {},
|
||||
"license": "MIT",
|
||||
"scripts": [
|
||||
"jquery.transit.js"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,745 @@
|
||||
/*!
|
||||
* jQuery Transit - CSS3 transitions and transformations
|
||||
* (c) 2011-2014 Rico Sta. Cruz
|
||||
* MIT Licensed.
|
||||
*
|
||||
* http://ricostacruz.com/jquery.transit
|
||||
* http://github.com/rstacruz/jquery.transit
|
||||
*/
|
||||
|
||||
/* jshint expr: true */
|
||||
|
||||
;(function (root, factory) {
|
||||
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(['jquery'], factory);
|
||||
} else if (typeof exports === 'object') {
|
||||
module.exports = factory(require('jquery'));
|
||||
} else {
|
||||
factory(root.jQuery);
|
||||
}
|
||||
|
||||
}(this, function($) {
|
||||
|
||||
$.transit = {
|
||||
version: "0.9.12",
|
||||
|
||||
// Map of $.css() keys to values for 'transitionProperty'.
|
||||
// See https://developer.mozilla.org/en/CSS/CSS_transitions#Properties_that_can_be_animated
|
||||
propertyMap: {
|
||||
marginLeft : 'margin',
|
||||
marginRight : 'margin',
|
||||
marginBottom : 'margin',
|
||||
marginTop : 'margin',
|
||||
paddingLeft : 'padding',
|
||||
paddingRight : 'padding',
|
||||
paddingBottom : 'padding',
|
||||
paddingTop : 'padding'
|
||||
},
|
||||
|
||||
// Will simply transition "instantly" if false
|
||||
enabled: true,
|
||||
|
||||
// Set this to false if you don't want to use the transition end property.
|
||||
useTransitionEnd: false
|
||||
};
|
||||
|
||||
var div = document.createElement('div');
|
||||
var support = {};
|
||||
|
||||
// Helper function to get the proper vendor property name.
|
||||
// (`transition` => `WebkitTransition`)
|
||||
function getVendorPropertyName(prop) {
|
||||
// Handle unprefixed versions (FF16+, for example)
|
||||
if (prop in div.style) return prop;
|
||||
|
||||
var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
|
||||
var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1);
|
||||
|
||||
for (var i=0; i<prefixes.length; ++i) {
|
||||
var vendorProp = prefixes[i] + prop_;
|
||||
if (vendorProp in div.style) { return vendorProp; }
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to check if transform3D is supported.
|
||||
// Should return true for Webkits and Firefox 10+.
|
||||
function checkTransform3dSupport() {
|
||||
div.style[support.transform] = '';
|
||||
div.style[support.transform] = 'rotateY(90deg)';
|
||||
return div.style[support.transform] !== '';
|
||||
}
|
||||
|
||||
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
|
||||
|
||||
// Check for the browser's transitions support.
|
||||
support.transition = getVendorPropertyName('transition');
|
||||
support.transitionDelay = getVendorPropertyName('transitionDelay');
|
||||
support.transform = getVendorPropertyName('transform');
|
||||
support.transformOrigin = getVendorPropertyName('transformOrigin');
|
||||
support.filter = getVendorPropertyName('Filter');
|
||||
support.transform3d = checkTransform3dSupport();
|
||||
|
||||
var eventNames = {
|
||||
'transition': 'transitionend',
|
||||
'MozTransition': 'transitionend',
|
||||
'OTransition': 'oTransitionEnd',
|
||||
'WebkitTransition': 'webkitTransitionEnd',
|
||||
'msTransition': 'MSTransitionEnd'
|
||||
};
|
||||
|
||||
// Detect the 'transitionend' event needed.
|
||||
var transitionEnd = support.transitionEnd = eventNames[support.transition] || null;
|
||||
|
||||
// Populate jQuery's `$.support` with the vendor prefixes we know.
|
||||
// As per [jQuery's cssHooks documentation](http://api.jquery.com/jQuery.cssHooks/),
|
||||
// we set $.support.transition to a string of the actual property name used.
|
||||
for (var key in support) {
|
||||
if (support.hasOwnProperty(key) && typeof $.support[key] === 'undefined') {
|
||||
$.support[key] = support[key];
|
||||
}
|
||||
}
|
||||
|
||||
// Avoid memory leak in IE.
|
||||
div = null;
|
||||
|
||||
// ## $.cssEase
|
||||
// List of easing aliases that you can use with `$.fn.transition`.
|
||||
$.cssEase = {
|
||||
'_default': 'ease',
|
||||
'in': 'ease-in',
|
||||
'out': 'ease-out',
|
||||
'in-out': 'ease-in-out',
|
||||
'snap': 'cubic-bezier(0,1,.5,1)',
|
||||
// Penner equations
|
||||
'easeInCubic': 'cubic-bezier(.550,.055,.675,.190)',
|
||||
'easeOutCubic': 'cubic-bezier(.215,.61,.355,1)',
|
||||
'easeInOutCubic': 'cubic-bezier(.645,.045,.355,1)',
|
||||
'easeInCirc': 'cubic-bezier(.6,.04,.98,.335)',
|
||||
'easeOutCirc': 'cubic-bezier(.075,.82,.165,1)',
|
||||
'easeInOutCirc': 'cubic-bezier(.785,.135,.15,.86)',
|
||||
'easeInExpo': 'cubic-bezier(.95,.05,.795,.035)',
|
||||
'easeOutExpo': 'cubic-bezier(.19,1,.22,1)',
|
||||
'easeInOutExpo': 'cubic-bezier(1,0,0,1)',
|
||||
'easeInQuad': 'cubic-bezier(.55,.085,.68,.53)',
|
||||
'easeOutQuad': 'cubic-bezier(.25,.46,.45,.94)',
|
||||
'easeInOutQuad': 'cubic-bezier(.455,.03,.515,.955)',
|
||||
'easeInQuart': 'cubic-bezier(.895,.03,.685,.22)',
|
||||
'easeOutQuart': 'cubic-bezier(.165,.84,.44,1)',
|
||||
'easeInOutQuart': 'cubic-bezier(.77,0,.175,1)',
|
||||
'easeInQuint': 'cubic-bezier(.755,.05,.855,.06)',
|
||||
'easeOutQuint': 'cubic-bezier(.23,1,.32,1)',
|
||||
'easeInOutQuint': 'cubic-bezier(.86,0,.07,1)',
|
||||
'easeInSine': 'cubic-bezier(.47,0,.745,.715)',
|
||||
'easeOutSine': 'cubic-bezier(.39,.575,.565,1)',
|
||||
'easeInOutSine': 'cubic-bezier(.445,.05,.55,.95)',
|
||||
'easeInBack': 'cubic-bezier(.6,-.28,.735,.045)',
|
||||
'easeOutBack': 'cubic-bezier(.175, .885,.32,1.275)',
|
||||
'easeInOutBack': 'cubic-bezier(.68,-.55,.265,1.55)'
|
||||
};
|
||||
|
||||
// ## 'transform' CSS hook
|
||||
// Allows you to use the `transform` property in CSS.
|
||||
//
|
||||
// $("#hello").css({ transform: "rotate(90deg)" });
|
||||
//
|
||||
// $("#hello").css('transform');
|
||||
// //=> { rotate: '90deg' }
|
||||
//
|
||||
$.cssHooks['transit:transform'] = {
|
||||
// The getter returns a `Transform` object.
|
||||
get: function(elem) {
|
||||
return $(elem).data('transform') || new Transform();
|
||||
},
|
||||
|
||||
// The setter accepts a `Transform` object or a string.
|
||||
set: function(elem, v) {
|
||||
var value = v;
|
||||
|
||||
if (!(value instanceof Transform)) {
|
||||
value = new Transform(value);
|
||||
}
|
||||
|
||||
// We've seen the 3D version of Scale() not work in Chrome when the
|
||||
// element being scaled extends outside of the viewport. Thus, we're
|
||||
// forcing Chrome to not use the 3d transforms as well. Not sure if
|
||||
// translate is affectede, but not risking it. Detection code from
|
||||
// http://davidwalsh.name/detecting-google-chrome-javascript
|
||||
if (support.transform === 'WebkitTransform' && !isChrome) {
|
||||
elem.style[support.transform] = value.toString(true);
|
||||
} else {
|
||||
elem.style[support.transform] = value.toString();
|
||||
}
|
||||
|
||||
$(elem).data('transform', value);
|
||||
}
|
||||
};
|
||||
|
||||
// Add a CSS hook for `.css({ transform: '...' })`.
|
||||
// In jQuery 1.8+, this will intentionally override the default `transform`
|
||||
// CSS hook so it'll play well with Transit. (see issue #62)
|
||||
$.cssHooks.transform = {
|
||||
set: $.cssHooks['transit:transform'].set
|
||||
};
|
||||
|
||||
// ## 'filter' CSS hook
|
||||
// Allows you to use the `filter` property in CSS.
|
||||
//
|
||||
// $("#hello").css({ filter: 'blur(10px)' });
|
||||
//
|
||||
$.cssHooks.filter = {
|
||||
get: function(elem) {
|
||||
return elem.style[support.filter];
|
||||
},
|
||||
set: function(elem, value) {
|
||||
elem.style[support.filter] = value;
|
||||
}
|
||||
};
|
||||
|
||||
// jQuery 1.8+ supports prefix-free transitions, so these polyfills will not
|
||||
// be necessary.
|
||||
if ($.fn.jquery < "1.8") {
|
||||
// ## 'transformOrigin' CSS hook
|
||||
// Allows the use for `transformOrigin` to define where scaling and rotation
|
||||
// is pivoted.
|
||||
//
|
||||
// $("#hello").css({ transformOrigin: '0 0' });
|
||||
//
|
||||
$.cssHooks.transformOrigin = {
|
||||
get: function(elem) {
|
||||
return elem.style[support.transformOrigin];
|
||||
},
|
||||
set: function(elem, value) {
|
||||
elem.style[support.transformOrigin] = value;
|
||||
}
|
||||
};
|
||||
|
||||
// ## 'transition' CSS hook
|
||||
// Allows you to use the `transition` property in CSS.
|
||||
//
|
||||
// $("#hello").css({ transition: 'all 0 ease 0' });
|
||||
//
|
||||
$.cssHooks.transition = {
|
||||
get: function(elem) {
|
||||
return elem.style[support.transition];
|
||||
},
|
||||
set: function(elem, value) {
|
||||
elem.style[support.transition] = value;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// ## Other CSS hooks
|
||||
// Allows you to rotate, scale and translate.
|
||||
registerCssHook('scale');
|
||||
registerCssHook('scaleX');
|
||||
registerCssHook('scaleY');
|
||||
registerCssHook('translate');
|
||||
registerCssHook('rotate');
|
||||
registerCssHook('rotateX');
|
||||
registerCssHook('rotateY');
|
||||
registerCssHook('rotate3d');
|
||||
registerCssHook('perspective');
|
||||
registerCssHook('skewX');
|
||||
registerCssHook('skewY');
|
||||
registerCssHook('x', true);
|
||||
registerCssHook('y', true);
|
||||
|
||||
// ## Transform class
|
||||
// This is the main class of a transformation property that powers
|
||||
// `$.fn.css({ transform: '...' })`.
|
||||
//
|
||||
// This is, in essence, a dictionary object with key/values as `-transform`
|
||||
// properties.
|
||||
//
|
||||
// var t = new Transform("rotate(90) scale(4)");
|
||||
//
|
||||
// t.rotate //=> "90deg"
|
||||
// t.scale //=> "4,4"
|
||||
//
|
||||
// Setters are accounted for.
|
||||
//
|
||||
// t.set('rotate', 4)
|
||||
// t.rotate //=> "4deg"
|
||||
//
|
||||
// Convert it to a CSS string using the `toString()` and `toString(true)` (for WebKit)
|
||||
// functions.
|
||||
//
|
||||
// t.toString() //=> "rotate(90deg) scale(4,4)"
|
||||
// t.toString(true) //=> "rotate(90deg) scale3d(4,4,0)" (WebKit version)
|
||||
//
|
||||
function Transform(str) {
|
||||
if (typeof str === 'string') { this.parse(str); }
|
||||
return this;
|
||||
}
|
||||
|
||||
Transform.prototype = {
|
||||
// ### setFromString()
|
||||
// Sets a property from a string.
|
||||
//
|
||||
// t.setFromString('scale', '2,4');
|
||||
// // Same as set('scale', '2', '4');
|
||||
//
|
||||
setFromString: function(prop, val) {
|
||||
var args =
|
||||
(typeof val === 'string') ? val.split(',') :
|
||||
(val.constructor === Array) ? val :
|
||||
[ val ];
|
||||
|
||||
args.unshift(prop);
|
||||
|
||||
Transform.prototype.set.apply(this, args);
|
||||
},
|
||||
|
||||
// ### set()
|
||||
// Sets a property.
|
||||
//
|
||||
// t.set('scale', 2, 4);
|
||||
//
|
||||
set: function(prop) {
|
||||
var args = Array.prototype.slice.apply(arguments, [1]);
|
||||
if (this.setter[prop]) {
|
||||
this.setter[prop].apply(this, args);
|
||||
} else {
|
||||
this[prop] = args.join(',');
|
||||
}
|
||||
},
|
||||
|
||||
get: function(prop) {
|
||||
if (this.getter[prop]) {
|
||||
return this.getter[prop].apply(this);
|
||||
} else {
|
||||
return this[prop] || 0;
|
||||
}
|
||||
},
|
||||
|
||||
setter: {
|
||||
// ### rotate
|
||||
//
|
||||
// .css({ rotate: 30 })
|
||||
// .css({ rotate: "30" })
|
||||
// .css({ rotate: "30deg" })
|
||||
// .css({ rotate: "30deg" })
|
||||
//
|
||||
rotate: function(theta) {
|
||||
this.rotate = unit(theta, 'deg');
|
||||
},
|
||||
|
||||
rotateX: function(theta) {
|
||||
this.rotateX = unit(theta, 'deg');
|
||||
},
|
||||
|
||||
rotateY: function(theta) {
|
||||
this.rotateY = unit(theta, 'deg');
|
||||
},
|
||||
|
||||
// ### scale
|
||||
//
|
||||
// .css({ scale: 9 }) //=> "scale(9,9)"
|
||||
// .css({ scale: '3,2' }) //=> "scale(3,2)"
|
||||
//
|
||||
scale: function(x, y) {
|
||||
if (y === undefined) { y = x; }
|
||||
this.scale = x + "," + y;
|
||||
},
|
||||
|
||||
// ### skewX + skewY
|
||||
skewX: function(x) {
|
||||
this.skewX = unit(x, 'deg');
|
||||
},
|
||||
|
||||
skewY: function(y) {
|
||||
this.skewY = unit(y, 'deg');
|
||||
},
|
||||
|
||||
// ### perspectvie
|
||||
perspective: function(dist) {
|
||||
this.perspective = unit(dist, 'px');
|
||||
},
|
||||
|
||||
// ### x / y
|
||||
// Translations. Notice how this keeps the other value.
|
||||
//
|
||||
// .css({ x: 4 }) //=> "translate(4px, 0)"
|
||||
// .css({ y: 10 }) //=> "translate(4px, 10px)"
|
||||
//
|
||||
x: function(x) {
|
||||
this.set('translate', x, null);
|
||||
},
|
||||
|
||||
y: function(y) {
|
||||
this.set('translate', null, y);
|
||||
},
|
||||
|
||||
// ### translate
|
||||
// Notice how this keeps the other value.
|
||||
//
|
||||
// .css({ translate: '2, 5' }) //=> "translate(2px, 5px)"
|
||||
//
|
||||
translate: function(x, y) {
|
||||
if (this._translateX === undefined) { this._translateX = 0; }
|
||||
if (this._translateY === undefined) { this._translateY = 0; }
|
||||
|
||||
if (x !== null && x !== undefined) { this._translateX = unit(x, 'px'); }
|
||||
if (y !== null && y !== undefined) { this._translateY = unit(y, 'px'); }
|
||||
|
||||
this.translate = this._translateX + "," + this._translateY;
|
||||
}
|
||||
},
|
||||
|
||||
getter: {
|
||||
x: function() {
|
||||
return this._translateX || 0;
|
||||
},
|
||||
|
||||
y: function() {
|
||||
return this._translateY || 0;
|
||||
},
|
||||
|
||||
scale: function() {
|
||||
var s = (this.scale || "1,1").split(',');
|
||||
if (s[0]) { s[0] = parseFloat(s[0]); }
|
||||
if (s[1]) { s[1] = parseFloat(s[1]); }
|
||||
|
||||
// "2.5,2.5" => 2.5
|
||||
// "2.5,1" => [2.5,1]
|
||||
return (s[0] === s[1]) ? s[0] : s;
|
||||
},
|
||||
|
||||
rotate3d: function() {
|
||||
var s = (this.rotate3d || "0,0,0,0deg").split(',');
|
||||
for (var i=0; i<=3; ++i) {
|
||||
if (s[i]) { s[i] = parseFloat(s[i]); }
|
||||
}
|
||||
if (s[3]) { s[3] = unit(s[3], 'deg'); }
|
||||
|
||||
return s;
|
||||
}
|
||||
},
|
||||
|
||||
// ### parse()
|
||||
// Parses from a string. Called on constructor.
|
||||
parse: function(str) {
|
||||
var self = this;
|
||||
str.replace(/([a-zA-Z0-9]+)\((.*?)\)/g, function(x, prop, val) {
|
||||
self.setFromString(prop, val);
|
||||
});
|
||||
},
|
||||
|
||||
// ### toString()
|
||||
// Converts to a `transition` CSS property string. If `use3d` is given,
|
||||
// it converts to a `-webkit-transition` CSS property string instead.
|
||||
toString: function(use3d) {
|
||||
var re = [];
|
||||
|
||||
for (var i in this) {
|
||||
if (this.hasOwnProperty(i)) {
|
||||
// Don't use 3D transformations if the browser can't support it.
|
||||
if ((!support.transform3d) && (
|
||||
(i === 'rotateX') ||
|
||||
(i === 'rotateY') ||
|
||||
(i === 'perspective') ||
|
||||
(i === 'transformOrigin'))) { continue; }
|
||||
|
||||
if (i[0] !== '_') {
|
||||
if (use3d && (i === 'scale')) {
|
||||
re.push(i + "3d(" + this[i] + ",1)");
|
||||
} else if (use3d && (i === 'translate')) {
|
||||
re.push(i + "3d(" + this[i] + ",0)");
|
||||
} else {
|
||||
re.push(i + "(" + this[i] + ")");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return re.join(" ");
|
||||
}
|
||||
};
|
||||
|
||||
function callOrQueue(self, queue, fn) {
|
||||
if (queue === true) {
|
||||
self.queue(fn);
|
||||
} else if (queue) {
|
||||
self.queue(queue, fn);
|
||||
} else {
|
||||
self.each(function () {
|
||||
fn.call(this);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ### getProperties(dict)
|
||||
// Returns properties (for `transition-property`) for dictionary `props`. The
|
||||
// value of `props` is what you would expect in `$.css(...)`.
|
||||
function getProperties(props) {
|
||||
var re = [];
|
||||
|
||||
$.each(props, function(key) {
|
||||
key = $.camelCase(key); // Convert "text-align" => "textAlign"
|
||||
key = $.transit.propertyMap[key] || $.cssProps[key] || key;
|
||||
key = uncamel(key); // Convert back to dasherized
|
||||
|
||||
// Get vendor specify propertie
|
||||
if (support[key])
|
||||
key = uncamel(support[key]);
|
||||
|
||||
if ($.inArray(key, re) === -1) { re.push(key); }
|
||||
});
|
||||
|
||||
return re;
|
||||
}
|
||||
|
||||
// ### getTransition()
|
||||
// Returns the transition string to be used for the `transition` CSS property.
|
||||
//
|
||||
// Example:
|
||||
//
|
||||
// getTransition({ opacity: 1, rotate: 30 }, 500, 'ease');
|
||||
// //=> 'opacity 500ms ease, -webkit-transform 500ms ease'
|
||||
//
|
||||
function getTransition(properties, duration, easing, delay) {
|
||||
// Get the CSS properties needed.
|
||||
var props = getProperties(properties);
|
||||
|
||||
// Account for aliases (`in` => `ease-in`).
|
||||
if ($.cssEase[easing]) { easing = $.cssEase[easing]; }
|
||||
|
||||
// Build the duration/easing/delay attributes for it.
|
||||
var attribs = '' + toMS(duration) + ' ' + easing;
|
||||
if (parseInt(delay, 10) > 0) { attribs += ' ' + toMS(delay); }
|
||||
|
||||
// For more properties, add them this way:
|
||||
// "margin 200ms ease, padding 200ms ease, ..."
|
||||
var transitions = [];
|
||||
$.each(props, function(i, name) {
|
||||
transitions.push(name + ' ' + attribs);
|
||||
});
|
||||
|
||||
return transitions.join(', ');
|
||||
}
|
||||
|
||||
// ## $.fn.transition
|
||||
// Works like $.fn.animate(), but uses CSS transitions.
|
||||
//
|
||||
// $("...").transition({ opacity: 0.1, scale: 0.3 });
|
||||
//
|
||||
// // Specific duration
|
||||
// $("...").transition({ opacity: 0.1, scale: 0.3 }, 500);
|
||||
//
|
||||
// // With duration and easing
|
||||
// $("...").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');
|
||||
//
|
||||
// // With callback
|
||||
// $("...").transition({ opacity: 0.1, scale: 0.3 }, function() { ... });
|
||||
//
|
||||
// // With everything
|
||||
// $("...").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() { ... });
|
||||
//
|
||||
// // Alternate syntax
|
||||
// $("...").transition({
|
||||
// opacity: 0.1,
|
||||
// duration: 200,
|
||||
// delay: 40,
|
||||
// easing: 'in',
|
||||
// complete: function() { /* ... */ }
|
||||
// });
|
||||
//
|
||||
$.fn.transition = $.fn.transit = function(properties, duration, easing, callback) {
|
||||
var self = this;
|
||||
var delay = 0;
|
||||
var queue = true;
|
||||
|
||||
var theseProperties = $.extend(true, {}, properties);
|
||||
|
||||
// Account for `.transition(properties, callback)`.
|
||||
if (typeof duration === 'function') {
|
||||
callback = duration;
|
||||
duration = undefined;
|
||||
}
|
||||
|
||||
// Account for `.transition(properties, options)`.
|
||||
if (typeof duration === 'object') {
|
||||
easing = duration.easing;
|
||||
delay = duration.delay || 0;
|
||||
queue = typeof duration.queue === "undefined" ? true : duration.queue;
|
||||
callback = duration.complete;
|
||||
duration = duration.duration;
|
||||
}
|
||||
|
||||
// Account for `.transition(properties, duration, callback)`.
|
||||
if (typeof easing === 'function') {
|
||||
callback = easing;
|
||||
easing = undefined;
|
||||
}
|
||||
|
||||
// Alternate syntax.
|
||||
if (typeof theseProperties.easing !== 'undefined') {
|
||||
easing = theseProperties.easing;
|
||||
delete theseProperties.easing;
|
||||
}
|
||||
|
||||
if (typeof theseProperties.duration !== 'undefined') {
|
||||
duration = theseProperties.duration;
|
||||
delete theseProperties.duration;
|
||||
}
|
||||
|
||||
if (typeof theseProperties.complete !== 'undefined') {
|
||||
callback = theseProperties.complete;
|
||||
delete theseProperties.complete;
|
||||
}
|
||||
|
||||
if (typeof theseProperties.queue !== 'undefined') {
|
||||
queue = theseProperties.queue;
|
||||
delete theseProperties.queue;
|
||||
}
|
||||
|
||||
if (typeof theseProperties.delay !== 'undefined') {
|
||||
delay = theseProperties.delay;
|
||||
delete theseProperties.delay;
|
||||
}
|
||||
|
||||
// Set defaults. (`400` duration, `ease` easing)
|
||||
if (typeof duration === 'undefined') { duration = $.fx.speeds._default; }
|
||||
if (typeof easing === 'undefined') { easing = $.cssEase._default; }
|
||||
|
||||
duration = toMS(duration);
|
||||
|
||||
// Build the `transition` property.
|
||||
var transitionValue = getTransition(theseProperties, duration, easing, delay);
|
||||
|
||||
// Compute delay until callback.
|
||||
// If this becomes 0, don't bother setting the transition property.
|
||||
var work = $.transit.enabled && support.transition;
|
||||
var i = work ? (parseInt(duration, 10) + parseInt(delay, 10)) : 0;
|
||||
|
||||
// If there's nothing to do...
|
||||
if (i === 0) {
|
||||
var fn = function(next) {
|
||||
self.css(theseProperties);
|
||||
if (callback) { callback.apply(self); }
|
||||
if (next) { next(); }
|
||||
};
|
||||
|
||||
callOrQueue(self, queue, fn);
|
||||
return self;
|
||||
}
|
||||
|
||||
// Save the old transitions of each element so we can restore it later.
|
||||
var oldTransitions = {};
|
||||
|
||||
var run = function(nextCall) {
|
||||
var bound = false;
|
||||
|
||||
// Prepare the callback.
|
||||
var cb = function() {
|
||||
if (bound) { self.unbind(transitionEnd, cb); }
|
||||
|
||||
if (i > 0) {
|
||||
self.each(function() {
|
||||
this.style[support.transition] = (oldTransitions[this] || null);
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof callback === 'function') { callback.apply(self); }
|
||||
if (typeof nextCall === 'function') { nextCall(); }
|
||||
};
|
||||
|
||||
if ((i > 0) && (transitionEnd) && ($.transit.useTransitionEnd)) {
|
||||
// Use the 'transitionend' event if it's available.
|
||||
bound = true;
|
||||
self.bind(transitionEnd, cb);
|
||||
} else {
|
||||
// Fallback to timers if the 'transitionend' event isn't supported.
|
||||
window.setTimeout(cb, i);
|
||||
}
|
||||
|
||||
// Apply transitions.
|
||||
self.each(function() {
|
||||
if (i > 0) {
|
||||
this.style[support.transition] = transitionValue;
|
||||
}
|
||||
$(this).css(theseProperties);
|
||||
});
|
||||
};
|
||||
|
||||
// Defer running. This allows the browser to paint any pending CSS it hasn't
|
||||
// painted yet before doing the transitions.
|
||||
var deferredRun = function(next) {
|
||||
this.offsetWidth; // force a repaint
|
||||
run(next);
|
||||
};
|
||||
|
||||
// Use jQuery's fx queue.
|
||||
callOrQueue(self, queue, deferredRun);
|
||||
|
||||
// Chainability.
|
||||
return this;
|
||||
};
|
||||
|
||||
function registerCssHook(prop, isPixels) {
|
||||
// For certain properties, the 'px' should not be implied.
|
||||
if (!isPixels) { $.cssNumber[prop] = true; }
|
||||
|
||||
$.transit.propertyMap[prop] = support.transform;
|
||||
|
||||
$.cssHooks[prop] = {
|
||||
get: function(elem) {
|
||||
var t = $(elem).css('transit:transform');
|
||||
return t.get(prop);
|
||||
},
|
||||
|
||||
set: function(elem, value) {
|
||||
var t = $(elem).css('transit:transform');
|
||||
t.setFromString(prop, value);
|
||||
|
||||
$(elem).css({ 'transit:transform': t });
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
// ### uncamel(str)
|
||||
// Converts a camelcase string to a dasherized string.
|
||||
// (`marginLeft` => `margin-left`)
|
||||
function uncamel(str) {
|
||||
return str.replace(/([A-Z])/g, function(letter) { return '-' + letter.toLowerCase(); });
|
||||
}
|
||||
|
||||
// ### unit(number, unit)
|
||||
// Ensures that number `number` has a unit. If no unit is found, assume the
|
||||
// default is `unit`.
|
||||
//
|
||||
// unit(2, 'px') //=> "2px"
|
||||
// unit("30deg", 'rad') //=> "30deg"
|
||||
//
|
||||
function unit(i, units) {
|
||||
if ((typeof i === "string") && (!i.match(/^[\-0-9\.]+$/))) {
|
||||
return i;
|
||||
} else {
|
||||
return "" + i + units;
|
||||
}
|
||||
}
|
||||
|
||||
// ### toMS(duration)
|
||||
// Converts given `duration` to a millisecond string.
|
||||
//
|
||||
// toMS('fast') => $.fx.speeds[i] => "200ms"
|
||||
// toMS('normal') //=> $.fx.speeds._default => "400ms"
|
||||
// toMS(10) //=> '10ms'
|
||||
// toMS('100ms') //=> '100ms'
|
||||
//
|
||||
function toMS(duration) {
|
||||
var i = duration;
|
||||
|
||||
// Allow string durations like 'fast' and 'slow', without overriding numeric values.
|
||||
if (typeof i === 'string' && (!i.match(/^[\-0-9\.]+/))) { i = $.fx.speeds[i] || $.fx.speeds._default; }
|
||||
|
||||
return unit(i, 'ms');
|
||||
}
|
||||
|
||||
// Export some functions for testable-ness.
|
||||
$.transit.getTransitionValue = getTransition;
|
||||
|
||||
return $;
|
||||
}));
|
||||
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "jquery.transit",
|
||||
"version": "0.9.12",
|
||||
"description": "Smooth CSS3 transitions and transformations for jQuery.",
|
||||
"main": "jquery.transit.js",
|
||||
"directories": {
|
||||
"test": "test"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "mocha"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/rstacruz/jquery.transit.git"
|
||||
},
|
||||
"keywords": [
|
||||
"css3",
|
||||
"animation",
|
||||
"transition"
|
||||
],
|
||||
"author": "Rico Sta. Cruz <hi@ricostacruz.com>",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"jquery": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"chai": "1.9.1",
|
||||
"sinon": "1.10.2",
|
||||
"jsdom": "0.11.0",
|
||||
"coffee-script": "1.7.1"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/rstacruz/jquery.transit/issues"
|
||||
},
|
||||
"homepage": "http://ricostacruz.com/jquery.transit"
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>jQuery Transit tests</title>
|
||||
<script>
|
||||
/*
|
||||
* Dynamic script loading
|
||||
*/
|
||||
|
||||
(function() {
|
||||
var m = location.search.match(/jquery=([^&$]*)/);
|
||||
var jQueryVersion = m ? m[1] : "1.8.1";
|
||||
|
||||
function addScript(src) {
|
||||
document.write("<scr"+"ipt src='"+src+"'></scr"+"ipt>");
|
||||
}
|
||||
|
||||
// Dynamically load jQuery depending on what's passed on get params.
|
||||
if (jQueryVersion === "1.9.0b1") {
|
||||
addScript("http://code.jquery.com/jquery-1.9.0b1.js");
|
||||
addScript("http://code.jquery.com/jquery-migrate-1.0.0b1.js");
|
||||
} else {
|
||||
addScript("http://ajax.googleapis.com/ajax/libs/jquery/"+jQueryVersion+"/jquery.min.js");
|
||||
}
|
||||
addScript("../jquery.transit.js");
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script src="test.js"></script>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div class='use'>
|
||||
Use:
|
||||
<a href='index.html?jquery=2.0.3'>jQ 2.0.3</a>
|
||||
<a href='index.html?jquery=1.9.0b1'>jQ 1.9.0b1</a>
|
||||
<a href='index.html?jquery=1.8.1'>jQ 1.8</a>
|
||||
<a href='index.html?jquery=1.7.0'>jQ 1.7</a>
|
||||
<a href='index.html?jquery=1.6.0'>jQ 1.6</a>
|
||||
<a href='index.html?jquery=1.5.0'>jQ 1.5</a>
|
||||
<button class='play-all'>Play all</button>
|
||||
</div>
|
||||
|
||||
<div class='description'>
|
||||
<h1>jQuery transit tests</h1>
|
||||
<p class='version' id='jquery-version'></p>
|
||||
<p>Since there's no reliable programmatic way to test for transitions, this
|
||||
is a simple page set up so you can visually inspect effects
|
||||
conveniently.</p>
|
||||
</div>
|
||||
|
||||
<div class='tests'></div>
|
||||
<script>
|
||||
group('Transformations');
|
||||
|
||||
test('Translation', function($box) { $box.transition({ x: 20, y: 20 }); });
|
||||
test('Rotate', function($box) { $box.transition({ rotate: 45 }); });
|
||||
test('Rotate via string', function($box) { $box.transition({ rotate: '45deg' }); });
|
||||
test('Skew X', function($box) { $box.transition({ skewX: 30 }); });
|
||||
test('Skew Y', function($box) { $box.transition({ skewY: 30 }); });
|
||||
test('Skew XY', function($box) { $box.transition({ skewY: 30, skewX: 30 }); });
|
||||
test('Scale up', function($box) { $box.transition({ scale: 2 }); });
|
||||
test('Scale down', function($box) { $box.transition({ scale: 0.5 }); });
|
||||
|
||||
group('3D transformations');
|
||||
|
||||
test('Rotate X', function($box) {
|
||||
$box.transition({
|
||||
perspective: '500px',
|
||||
rotateX: 180
|
||||
});
|
||||
});
|
||||
|
||||
test('Rotate Y', function($box) {
|
||||
$box.transition({
|
||||
perspective: '500px',
|
||||
rotateY: 180
|
||||
});
|
||||
});
|
||||
|
||||
test('Rotate X/Y', function($box) {
|
||||
$box.transition({
|
||||
perspective: '500px',
|
||||
rotateX: 180,
|
||||
rotateY: 180
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
group('Params');
|
||||
|
||||
test('Delay', function($box) {
|
||||
$box.transition({ rotate: 45, delay: 150 });
|
||||
});
|
||||
|
||||
test('Delay zero', function($box) {
|
||||
$box
|
||||
.transition({ x: 50, delay: 0 })
|
||||
.transition({ x: 0 });
|
||||
});
|
||||
|
||||
test('Ease (should be snappy)', function($box) {
|
||||
$box.transition(
|
||||
{ x: 100 }, 500,
|
||||
'cubic-bezier(0,0.9,0.3,1)');
|
||||
});
|
||||
|
||||
group('Chaining');
|
||||
|
||||
test('Queueing', function($box) {
|
||||
$box
|
||||
.transition({ x: 50 })
|
||||
.transition({ x: 0 })
|
||||
.transition({ y: 50 })
|
||||
.transition({ y: 0 });
|
||||
});
|
||||
|
||||
test('Duration 0 (should not flicker)', function($box) {
|
||||
$box
|
||||
.transition({ x: 50 }, 0)
|
||||
.transition({ x: 0 }, 0)
|
||||
.transition({ y: 50 }, 0);
|
||||
});
|
||||
|
||||
group('Callbacks');
|
||||
|
||||
test('2nd param', function($box) {
|
||||
$box.transition(
|
||||
{ rotate: 45 },
|
||||
function() { $box.html('OK'); });
|
||||
});
|
||||
|
||||
test('3rd param', function($box) {
|
||||
$box.transition(
|
||||
{ rotate: 45 },
|
||||
500,
|
||||
function() { $box.html('OK'); });
|
||||
});
|
||||
|
||||
test('as "complete"', function($box) {
|
||||
$box.transition({
|
||||
rotate: 45,
|
||||
complete: function() { $box.html('OK'); }
|
||||
});
|
||||
});
|
||||
|
||||
group('Misc');
|
||||
|
||||
test('CSS with Transition', function($box) {
|
||||
$box
|
||||
.css({ x: -50 })
|
||||
.transition({ x: 50 });
|
||||
});
|
||||
|
||||
test('Opacity', function($box) {
|
||||
$box
|
||||
.transition({ opacity: 0 });
|
||||
});
|
||||
|
||||
test('Transition of transform (no jump first time)', function($box) {
|
||||
$box
|
||||
.transition({ transform: "translateX(80px)" });
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
* { margin: 0; padding: 0; font-size: 1em; }
|
||||
html { padding: 40px; background: #e3e3e7; }
|
||||
body, td, input, textarea { font-family: helvetica neue, sans-serif; font-size: 9pt; color: #444; line-height: 1.4; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
|
||||
body { padding-top: 50px; }
|
||||
.use { position: fixed; top: 0; left: 0; right: 0; padding: 20px; border-bottom: solid 1px rgba(0, 0, 0, 0.1); background: rgba(250, 250, 250, 0.9); z-index: 10; }
|
||||
.test { width: 220px; padding: 20px; float: left; margin: 0 20px 20px 0; background: white; border-radius: 2px; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05), -1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 5px rgba(0, 0, 0, 0.05); }
|
||||
.test .area { width: auto; height: 100px; margin: 10px 0; position: relative; }
|
||||
.test:hover { box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05), -1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 5px rgba(0, 0, 0, 0.05), 0 0 0 4px rgba(0, 0, 0, 0.15); }
|
||||
.test h3 { font-size: 1.2em; margin-bottom: 2px; overflow: hidden; line-height: 24px; }
|
||||
.test h3 em { font-style: normal; font-weight: 200; float: right; color: #37a; font-size: 0.8em; }
|
||||
.test .box { position: absolute; top: 50%; left: 50%; margin: -16px 0 0 -16px; width: 32px; height: 32px; line-height: 32px; text-align: center; background: #505070; border-radius: 2px; z-index: 2; color: #ddd; }
|
||||
.test .ghost { background: #ddd; z-index: 1; box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.07), inset 0 0 0 1px rgba(0, 0, 0, 0.03); }
|
||||
.test pre { font-family: menlo, monospace; font-size: 7pt; padding: 10px; background: #eee; margin: 20px -20px -20px -20px; border-top: solid 1px #ddd; white-space: pre-wrap; line-height: 1.5; }
|
||||
.group-heading { margin: 20px 0 20px 0; padding-bottom: 10px; border-bottom: dotted 1px #ccc; font-size: 1.6em; clear: both; color: #70a0c0; font-weight: 200; }
|
||||
|
||||
.use button { padding: 0 10px; }
|
||||
.use a, .use button { margin: 0 5px; }
|
||||
|
||||
.description { padding-bottom: 20px; border-bottom: dotted 1px #ccc; }
|
||||
.description h1 { font-size: 2.5em; font-weight: 200; color: #707090; }
|
||||
.description p { font-size: 1.2em; color: #707090; width: 500px; }
|
||||
.description .version { margin-bottom: 20px; font-size: 1.2em; font-weight: bold; }
|
||||
@@ -0,0 +1,65 @@
|
||||
(function($) {
|
||||
/* Simple test framework of sorts */
|
||||
|
||||
|
||||
function addTestEvents ($test) {
|
||||
$test.bind('mouseenter play', function() {
|
||||
var $test = $(this).closest('.test');
|
||||
$test.trigger('reset');
|
||||
var $box = $test.find('.box:not(.ghost)');
|
||||
var $ghost = $box.clone().addClass('ghost').appendTo($test.find('.area'));
|
||||
|
||||
$test.data('code').fn($box, $test);
|
||||
});
|
||||
|
||||
$test.bind('mouseleave reset', function() {
|
||||
var $test = $(this).closest('.test');
|
||||
var $ghost = $test.find('.ghost');
|
||||
if ($ghost.length) {
|
||||
$test.find('.box:not(.ghost)').remove();
|
||||
$test.find('.ghost').removeClass('ghost');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.play-all').bind('click', function() {
|
||||
$('.test').trigger('play');
|
||||
});
|
||||
});
|
||||
|
||||
function test(name, fn) {
|
||||
var i = $('.tests .test').length;
|
||||
var $test = $('<div class="test"><h3></h3><div class="area"><div class="box"></div></div><pre class="code"></pre></div>');
|
||||
|
||||
var m = fn.toString().match(/\{([\s\S]*)\}$/);
|
||||
var code = m[1];
|
||||
code = code.replace(/^\s*|\s*$/g, '');
|
||||
code = code.replace(/\n {4}/g, "\n");
|
||||
name = name.replace(/\(.*\)/, function(n) { return "<em>"+n.substr(1,n.length-2)+"</em>"; });
|
||||
|
||||
$test.attr('id', 'test-'+i);
|
||||
$test.find('h3').html(name);
|
||||
$test.find('pre').text(code);
|
||||
$test.data('code', {fn: fn});
|
||||
addTestEvents($test);
|
||||
|
||||
$('.tests').append($test);
|
||||
}
|
||||
|
||||
function group(name) {
|
||||
$('.tests').append($('<h4 class="group-heading">').text(name));
|
||||
}
|
||||
|
||||
// Show versions
|
||||
$(function() {
|
||||
$('#jquery-version').html(
|
||||
'jQuery: v' + $.fn.jquery + '<br>' +
|
||||
'Transit: v' + $.transit.version
|
||||
);
|
||||
});
|
||||
|
||||
window.group = group;
|
||||
window.test = test;
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user