├── README.md
├── RELEASE-NOTES.md
├── bower.json
├── composer.json
├── index.js
├── package.js
├── package.json
├── transition.css
├── transition.js
├── transition.min.css
└── transition.min.js
/README.md:
--------------------------------------------------------------------------------
1 | # Semantic Transition
2 |
3 | This repository contains pre-compiled transition files using the default themes. This is intended for use in projects that do not need all the bells and whistles of Semantic UI, and want to keep file size to a minimum.
4 |
5 | For the latest changes please see the [Release Notes](https://github.com/Semantic-Org/UI-Transition/blob/master/RELEASE-NOTES.md)
6 |
7 | **Special Note**
8 | An update in `2.0.8` has fixed an issue which may have prevented some single component modules from working correctly. Please see notes in [this pull request](https://github.com/Semantic-Org/Semantic-UI/pull/2816).
9 |
10 | If you're looking for the full version of Semantic including all components and build tools [check out the main project repository](https://github.com/Semantic-Org/Semantic-UI/tree/1.0)
11 |
12 | #### To install with Bower
13 | ```
14 | bower install semantic-ui-transition
15 | ```
16 |
17 | #### To install with NPM
18 | ```
19 | npm install semantic-ui-transition
20 | ```
21 |
22 | #### To install with Meteor
23 | ```
24 | meteor add semantic:ui-transition
25 | ```
26 |
27 |
28 | ## Addendum
29 |
30 | This element's definitions (required class names, html structures) are available in the [UI Docs](http://www.semantic-ui.com)
31 |
32 | Please consider checking out [all the benefits to theming](http://www.learnsemantic.com/guide/expert.html) before using these stand-alone releases.
33 |
--------------------------------------------------------------------------------
/RELEASE-NOTES.md:
--------------------------------------------------------------------------------
1 | ### Version 2.3.3 - July 8th, 2018
2 |
3 | - **Icon** - Several icon names have been deprecated due to incompatibility with `transition in` and `transition out` used in animations.
4 |
5 | ### Version 2.3.0 - Feb 20, 2018
6 |
7 | - **Transition** - Adds new `glow` transition for highlighting an element on the page, and `zoom` animation for scaling elements without opacity tween.
8 | - **Images / Transition** - Fixed issue where `ui images` would show nested images with `transition hidden` as block (Fixes sequential img animation demo in docs)
9 |
10 | ### Version 2.2.5 - October, 27, 2016
11 |
12 | - **Progress** - Progress now includes transitionEnd failback for progress bar animations, this will prevent labels from continuing to be updated if the `transitionEnd` css callback does not fire correctly
13 | - **Transition** - You can now specify `data-display` to specify the final display state for an animation in cases that it is detected incorrectly (you can also pass in as a setting)
14 |
15 | ### Version 2.2.3 - August 21, 2016
16 |
17 | - **Transition** - Removed unreachable code **Thanks @basarat** [#4225](https://github.com/Semantic-Org/Semantic-UI/issues/4225)
18 |
19 | ### Version 2.2.0 - June 26, 2016
20 |
21 | - **Image** - `transition hidden image` now shows correctly as `visibility: hidden;` and not `display: none`. This will allow `offset` with `visibility` and `sticky` to work more seamlessly. `hidden image` will still remain `display: none;`
22 |
23 | ### Version 2.1.7 - Dec 19, 2015
24 |
25 | - **Transition** - Fixes `noAnimation` error to more reasonably announce that the element is "not in the DOM" [#3040](https://github.com/Semantic-Org/Semantic-UI/issues/3040)
26 |
27 | ### Version 2.1.5 - Nov 1, 2015
28 |
29 | - **Transition** - Fixed bug where static transitions (those that dont animate in/out of view) would not fire `onComplete` event
30 |
31 | #### Bugs
32 |
33 | - **Transition** - Transition callbacks now all have the correct `this` set. [#2758](https://github.com/Semantic-Org/Semantic-UI/issues/2758)
34 |
35 | ### Version 2.0.4 - July 17, 2015
36 |
37 | - **Transition** - Fixed issue where animating same element in its own `onComplete` would fail because animation had not yet called `force visible/hidden` [#2583](https://github.com/Semantic-Org/Semantic-UI/issues/2583)
38 |
39 | ### Version 2.0.3 - July 8, 2015
40 |
41 | - **Transition** - Fixes `get current animation` erroring when `module cache` is cleared. [#2469](https://github.com/Semantic-Org/Semantic-UI/issues/2469)
42 |
43 | ### Version 2.0.0 - June 30, 2015
44 |
45 | - **Transition** - Fallback javascript animations have been removed from UI components like dropdown and popup to increase performance. This removes need for expensive pseudo selectors like `:visible`, `:animated` and `:hidden` and reduces filesize.
46 | - **Transition** - Transition code has been optimized to increase performance. 100% improvement on first animation, and 40% improvement on subsequent animations.
47 | - **Modal** - Modal now uses an adjusted `scale in` transition in the default theme, that should be more subtle and work better with long modal content.
48 | - **Site** - Fixed mixed globals `@defaultDuration` and `@transitionDuration` usage to use a single variable across all UI `@defaultDuration`, the same for `@defaultEasing` and `@transitionEasing`
49 | - **Transition** - Adjusting `style` or `class` during a transition, will no longer reset the change after transition completes.
50 | - **Transition** - Transition will no longer force visible/hidden with inline styles if `onComplete` callback sets visibility.
51 | - **All Modules/Transition** - Transitions no longer use `rotateZ(0deg)` to trigger GPU display of visible state. This causes issues with `transform` creating new stacking context that can disrupt `z-index`.
52 | - **Dropdown** - Dropdowns with `transition: none` now work correctly.
53 | - **Sticky** - Fix issue with sticky content scroll css transition causing element to scroll too slowly when cannot fit on screen.
54 | - **Transition** - Fixed bug where transition out would cause unwanted focus event in IE if element has focus
55 | - **Transition** - Calling an `out` animation during an `in` animation with `queue: false` now correctly calls the `complete` event of the original animation
56 | - **Transition** - Fixed bug where transition could sometimes not occur when an element was determined to always be hidden
57 | - **Rating** - Rating styles have been adjusted to use subtle transitions and tweaked color values.
58 | - **Transition** - Transition no longer checks for vendor prefixed `animation-name` css property. This was introduced in jQuery `1.8`
59 | - **Transition** - Some transition have been modified so that the `in` animation is more telegraphed than the `out` animation, which may now recede more gently.
60 |
61 | ### Version 1.11.0 - March 3, 2015
62 |
63 | - **Transition** - Added more reasonable default durations for each animation
64 | - **Transition** - Added `toggle` behavior and docs for `show` and `hide`
65 | - **Transition** - transition now has `stop`, `stop all`, and `clear queue` for removing transitions, (undocumented method `stop`, and `start` renamed to `enable` and `disable`)
66 | - **Transition** - Fixes `swing out` animations not working correctly
67 | - **Transition** - Fixed display state other than `block` not determined when using `show` and `hide` without an animation
68 | - **Transition** - Fix bug in `remove looping` causing next animation to use same duration
69 | - **Transition** - Adds examples of `hide, `show`, `toggle`, `stop`, `stop all`, and `clear queue`
70 |
71 | ### Version 1.10.0 - February 23, 2015
72 |
73 | - **Transition** - Transitions now have `interval` to allow grouped elements to animate one by one with a delay between each animation. Grouped animations determine order based on transition direction to avoid reflows, or can manually be reversed by using reverse: true [See Examples](http://www.semantic-ui.com/modules/transition.html#grouped-transitions) for more details.
74 | - **Transition** - Webkit `failSafe` used for [Chromium Bug #437860](https://code.google.com/p/chromium/issues/detail?id=437860) now also works for queued animations
75 | -**Transition** - `useFailSafe` was incorrectly shown as `false` by default
76 |
77 | ### UI Changes
78 |
79 | - **Transition** - Fixes bug where `moduleNamespace` was being omitted
80 | - **Transition** - Transitions with direction now use word order dependency to prevent conflict with component directions, for example `bottom left popup slide down in transition
81 |
82 | ### Version 1.8.1 - January 26, 2015
83 |
84 | - **Popup** - Popup `hide all` will now use transition set in `settings.transition` when closing other popups
85 |
86 | ### Version 1.8.0 - January 23, 2015
87 |
88 | - **Transition** - Added many new transitions, and new directions for existing transitions **Thanks @ph7vc**
89 | - **Transition** - Transition duration now defaults to what is specified in `css`, to set custom duration you can still pass at run-time as a different value. Animation duration no longer set by default during animation.
90 | - **Transition** - Transition will now prevent repeated animations when using an inferred direction i.e. animation without `in` or `out` specified. When `queue: true` only animations with explicit direction, e.g. `fade in`, will be ignored when called repeatedly.
91 | - **Transition** - Fixed bug with animations that contain the strings 'in' or 'out' as part of their names, for example "swing"
92 |
93 | ### Version 1.7.0 - January 14, 2015
94 |
95 | - **Dropdown** - New `upward dropdown` variation, which opens its menu upward. Default animation now uses ``settings.transition = 'auto'` and determines direction of animation based on menu direction
96 |
97 | ### Version 1.6.1 - January 05, 2015
98 |
99 | - **Accordion** - Accordion now uses ``useFailSafe: true`` to avoid callbacks not occurring because of race conditions with `transitionend` in webkit
100 |
101 | ### Version 1.6.0 - January 05, 2015
102 |
103 | - **Accordion** - Child element animations now use ``$.fn.transition`` and css animations by default (if available)
104 |
105 | ### Version 1.1.0 - December 02, 2014
106 |
107 | - **Transition** - Transition's caching of final display state and animation existence now has improved performance.
108 | - **Transition** now has ``useFailSafe`` parameter (off by default) to ensure transition callback fires even if native ``onAnimationEnd`` event does not fire due to element visibility. [Chromium Bug Report by Product Manager @ Mozilla](https://code.google.com/p/chromium/issues/detail?id=135350#c2) and [this open issue](https://code.google.com/p/chromium/issues/detail?id=437860)
109 | - **Transition** - Transition now correctly detects missing animations, errors do not cause future image transitions to break
110 |
111 | ### Version 1.0.1 - November 28, 2014
112 |
113 | - **Transition** - Fix vertical flip not working due to css typo **Thanks cgroner**
114 | - **Table** - Fixes table cell transition animating all properties
115 |
116 | ### Version 1.0.0 - November 24, 2014
117 |
118 | - **Transition** - Complete, and Start callbacks are now ``onComplete`` and ``onStart``
119 | - **Transition** - Transition will now keep block position of elements hidden with visibility hidden
120 | - **Transition** - Transitions now will handle multiple display types more consistently
121 | - **Transition** - Transition now has a new ``start`` callback, before animation starts
122 | - **Transition** - Complete callback now does not occur if animation is interrupted before completing
123 | - **Transition** - You can now specify the final displayType of a transitioning element in metadata or settings (not just automatically detected)
124 |
125 | ### Version 0.19.0 - July 3, 2014
126 |
127 | - **Transition** - Adds "fade in left/right" variations to match "fade up/down" **Thanks AdamMaras**
128 |
129 | ### Version 0.16.1 - April 22, 2014
130 |
131 | - **Transition** - Fixes bug where transition could accidentally hide element on show due to error when determining original display type
132 |
133 | ### Version 0.16.0 - April 22, 2014
134 |
135 | - **Transition** - Fixes issue where transition hidden was sometimes overwritten by UI styles causing the element to stay visible
136 |
137 | ### Version 0.15.3 - April 04, 2014
138 |
139 | - **Transition** - CSS Transitions now work in legacy FF (FF > 12)
140 |
141 | ### Version 0.15.0 - Mar 14, 2014
142 |
143 | - **Modal** - Modal onShow and onHide occurs before transition starts, allowing for class name changes not to be reset
144 |
145 | ### Version 0.12.5 - Feb 04, 2014
146 |
147 | - **Modal** - Fixes modal throwing an error when transition is not included *Thanks robertoles*
148 |
149 | ### Version 0.12.0 - Jan 06, 2014
150 |
151 | - **Transition** - Transitions will now, by default, prevent the current animation from being queued while it is actively animating the same animation
152 |
153 | ### Merry Christmas!
154 |
155 | -**Transition**: Transition has been completely rewritten, performance should be about 10x after first animation due to caching and use of request animation frame
156 |
157 | -**Transition**: Transitions now work with **any display type** not just display: block, meaning transitions can be used on buttons and other inline elements without affecting display
158 |
159 | -**Transition**: Fixes typo in "horizontal flip out" causing opacity to be fading in
160 |
161 | ### Version 0.10.2 - Dec 13, 2013
162 |
163 | - **Dropdown** - Fixes missing easing equations for dropdown javascript animations. Would cause an error when no css transitions were included and jquery easing was not available.
164 |
165 | ### Version 0.9.4 - Nov 24, 2013
166 |
167 | - **Transition** - Fixes transition exists function from not being called
168 |
169 | ### Version 0.8.5 - Nov 2, 2013
170 |
171 | - **Modal** - Fixed issue with modals not working in 0.8.4 due to mistake in transition invoke
172 |
173 | ### Version 0.8.4 - Nov 1, 2013
174 |
175 | - **Modules** - Adds CSS transition support detection to all modules using css transitions to allow for graceful degradation for IE8
176 |
177 | ### Version 0.7.0 - Oct 22, 2013
178 |
179 | - **Transition** - onShow and onHide callbacks for visibility changing transitions
180 | - **Shape** - Transition duration can now be set programmatically
181 |
182 | ### Version 0.3.4 - Oct 2, 2013
183 |
184 | - Transitions now work in Safari versions that do not support animation-direction
185 |
186 | ### Version 0.2.1 - Sep 28, 2013
187 |
188 | - Transition now forces browser repaint after animation
189 |
190 | ### Version 0.1.0 - Sep 25, 2013
191 |
192 | - Updated documentation for sidebar, transition, and form validation
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "semantic-ui-transition",
3 | "description": "Transition - Semantic UI",
4 | "homepage": "http://www.semantic-ui.com",
5 | "author": {
6 | "name": "Jack Lukic",
7 | "web": "http://www.jacklukic.com"
8 | },
9 | "ignore": ["docs", "node", "server", "spec", "src", "test"],
10 | "keywords": ["semantic", "ui", "css3", "framework"],
11 | "license": ["http://semantic-ui.mit-license.org/"],
12 | "main": ["transition.css"]
13 | }
--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "semantic/transition",
3 | "description": "Single component release of transition",
4 | "homepage": "http://www.semantic-ui.com",
5 | "authors": [{
6 | "name": "Jack Lukic",
7 | "email": "jacklukic@gmail.com",
8 | "homepage": "http://www.jacklukic.com",
9 | "role": "Creator"
10 | }],
11 | "keywords": ["semantic", "ui", "css", "framework"],
12 | "license": "MIT",
13 | "version": "2.5.0"
14 | }
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.5.0 - Transition
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 | ;(function ($, window, document, undefined) {
12 |
13 | 'use strict';
14 |
15 | window = (typeof window != 'undefined' && window.Math == Math)
16 | ? window
17 | : (typeof self != 'undefined' && self.Math == Math)
18 | ? self
19 | : Function('return this')()
20 | ;
21 |
22 | var _module = module;
23 | module.exports = function() {
24 | var
25 | $allModules = $(this),
26 | moduleSelector = $allModules.selector || '',
27 |
28 | time = new Date().getTime(),
29 | performance = [],
30 |
31 | moduleArguments = arguments,
32 | query = moduleArguments[0],
33 | queryArguments = [].slice.call(arguments, 1),
34 | methodInvoked = (typeof query === 'string'),
35 |
36 | requestAnimationFrame = window.requestAnimationFrame
37 | || window.mozRequestAnimationFrame
38 | || window.webkitRequestAnimationFrame
39 | || window.msRequestAnimationFrame
40 | || function(callback) { setTimeout(callback, 0); },
41 |
42 | returnedValue
43 | ;
44 | $allModules
45 | .each(function(index) {
46 | var
47 | $module = $(this),
48 | element = this,
49 |
50 | // set at run time
51 | settings,
52 | instance,
53 |
54 | error,
55 | className,
56 | metadata,
57 | animationEnd,
58 | animationName,
59 |
60 | namespace,
61 | moduleNamespace,
62 | eventNamespace,
63 | module
64 | ;
65 |
66 | module = {
67 |
68 | initialize: function() {
69 |
70 | // get full settings
71 | settings = module.get.settings.apply(element, moduleArguments);
72 |
73 | // shorthand
74 | className = settings.className;
75 | error = settings.error;
76 | metadata = settings.metadata;
77 |
78 | // define namespace
79 | eventNamespace = '.' + settings.namespace;
80 | moduleNamespace = 'module-' + settings.namespace;
81 | instance = $module.data(moduleNamespace) || module;
82 |
83 | // get vendor specific events
84 | animationEnd = module.get.animationEndEvent();
85 |
86 | if(methodInvoked) {
87 | methodInvoked = module.invoke(query);
88 | }
89 |
90 | // method not invoked, lets run an animation
91 | if(methodInvoked === false) {
92 | module.verbose('Converted arguments into settings object', settings);
93 | if(settings.interval) {
94 | module.delay(settings.animate);
95 | }
96 | else {
97 | module.animate();
98 | }
99 | module.instantiate();
100 | }
101 | },
102 |
103 | instantiate: function() {
104 | module.verbose('Storing instance of module', module);
105 | instance = module;
106 | $module
107 | .data(moduleNamespace, instance)
108 | ;
109 | },
110 |
111 | destroy: function() {
112 | module.verbose('Destroying previous module for', element);
113 | $module
114 | .removeData(moduleNamespace)
115 | ;
116 | },
117 |
118 | refresh: function() {
119 | module.verbose('Refreshing display type on next animation');
120 | delete module.displayType;
121 | },
122 |
123 | forceRepaint: function() {
124 | module.verbose('Forcing element repaint');
125 | var
126 | $parentElement = $module.parent(),
127 | $nextElement = $module.next()
128 | ;
129 | if($nextElement.length === 0) {
130 | $module.detach().appendTo($parentElement);
131 | }
132 | else {
133 | $module.detach().insertBefore($nextElement);
134 | }
135 | },
136 |
137 | repaint: function() {
138 | module.verbose('Repainting element');
139 | var
140 | fakeAssignment = element.offsetWidth
141 | ;
142 | },
143 |
144 | delay: function(interval) {
145 | var
146 | direction = module.get.animationDirection(),
147 | shouldReverse,
148 | delay
149 | ;
150 | if(!direction) {
151 | direction = module.can.transition()
152 | ? module.get.direction()
153 | : 'static'
154 | ;
155 | }
156 | interval = (interval !== undefined)
157 | ? interval
158 | : settings.interval
159 | ;
160 | shouldReverse = (settings.reverse == 'auto' && direction == className.outward);
161 | delay = (shouldReverse || settings.reverse == true)
162 | ? ($allModules.length - index) * settings.interval
163 | : index * settings.interval
164 | ;
165 | module.debug('Delaying animation by', delay);
166 | setTimeout(module.animate, delay);
167 | },
168 |
169 | animate: function(overrideSettings) {
170 | settings = overrideSettings || settings;
171 | if(!module.is.supported()) {
172 | module.error(error.support);
173 | return false;
174 | }
175 | module.debug('Preparing animation', settings.animation);
176 | if(module.is.animating()) {
177 | if(settings.queue) {
178 | if(!settings.allowRepeats && module.has.direction() && module.is.occurring() && module.queuing !== true) {
179 | module.debug('Animation is currently occurring, preventing queueing same animation', settings.animation);
180 | }
181 | else {
182 | module.queue(settings.animation);
183 | }
184 | return false;
185 | }
186 | else if(!settings.allowRepeats && module.is.occurring()) {
187 | module.debug('Animation is already occurring, will not execute repeated animation', settings.animation);
188 | return false;
189 | }
190 | else {
191 | module.debug('New animation started, completing previous early', settings.animation);
192 | instance.complete();
193 | }
194 | }
195 | if( module.can.animate() ) {
196 | module.set.animating(settings.animation);
197 | }
198 | else {
199 | module.error(error.noAnimation, settings.animation, element);
200 | }
201 | },
202 |
203 | reset: function() {
204 | module.debug('Resetting animation to beginning conditions');
205 | module.remove.animationCallbacks();
206 | module.restore.conditions();
207 | module.remove.animating();
208 | },
209 |
210 | queue: function(animation) {
211 | module.debug('Queueing animation of', animation);
212 | module.queuing = true;
213 | $module
214 | .one(animationEnd + '.queue' + eventNamespace, function() {
215 | module.queuing = false;
216 | module.repaint();
217 | module.animate.apply(this, settings);
218 | })
219 | ;
220 | },
221 |
222 | complete: function (event) {
223 | module.debug('Animation complete', settings.animation);
224 | module.remove.completeCallback();
225 | module.remove.failSafe();
226 | if(!module.is.looping()) {
227 | if( module.is.outward() ) {
228 | module.verbose('Animation is outward, hiding element');
229 | module.restore.conditions();
230 | module.hide();
231 | }
232 | else if( module.is.inward() ) {
233 | module.verbose('Animation is outward, showing element');
234 | module.restore.conditions();
235 | module.show();
236 | }
237 | else {
238 | module.verbose('Static animation completed');
239 | module.restore.conditions();
240 | settings.onComplete.call(element);
241 | }
242 | }
243 | },
244 |
245 | force: {
246 | visible: function() {
247 | var
248 | style = $module.attr('style'),
249 | userStyle = module.get.userStyle(),
250 | displayType = module.get.displayType(),
251 | overrideStyle = userStyle + 'display: ' + displayType + ' !important;',
252 | currentDisplay = $module.css('display'),
253 | emptyStyle = (style === undefined || style === '')
254 | ;
255 | if(currentDisplay !== displayType) {
256 | module.verbose('Overriding default display to show element', displayType);
257 | $module
258 | .attr('style', overrideStyle)
259 | ;
260 | }
261 | else if(emptyStyle) {
262 | $module.removeAttr('style');
263 | }
264 | },
265 | hidden: function() {
266 | var
267 | style = $module.attr('style'),
268 | currentDisplay = $module.css('display'),
269 | emptyStyle = (style === undefined || style === '')
270 | ;
271 | if(currentDisplay !== 'none' && !module.is.hidden()) {
272 | module.verbose('Overriding default display to hide element');
273 | $module
274 | .css('display', 'none')
275 | ;
276 | }
277 | else if(emptyStyle) {
278 | $module
279 | .removeAttr('style')
280 | ;
281 | }
282 | }
283 | },
284 |
285 | has: {
286 | direction: function(animation) {
287 | var
288 | hasDirection = false
289 | ;
290 | animation = animation || settings.animation;
291 | if(typeof animation === 'string') {
292 | animation = animation.split(' ');
293 | $.each(animation, function(index, word){
294 | if(word === className.inward || word === className.outward) {
295 | hasDirection = true;
296 | }
297 | });
298 | }
299 | return hasDirection;
300 | },
301 | inlineDisplay: function() {
302 | var
303 | style = $module.attr('style') || ''
304 | ;
305 | return $.isArray(style.match(/display.*?;/, ''));
306 | }
307 | },
308 |
309 | set: {
310 | animating: function(animation) {
311 | var
312 | animationClass,
313 | direction
314 | ;
315 | // remove previous callbacks
316 | module.remove.completeCallback();
317 |
318 | // determine exact animation
319 | animation = animation || settings.animation;
320 | animationClass = module.get.animationClass(animation);
321 |
322 | // save animation class in cache to restore class names
323 | module.save.animation(animationClass);
324 |
325 | // override display if necessary so animation appears visibly
326 | module.force.visible();
327 |
328 | module.remove.hidden();
329 | module.remove.direction();
330 |
331 | module.start.animation(animationClass);
332 |
333 | },
334 | duration: function(animationName, duration) {
335 | duration = duration || settings.duration;
336 | duration = (typeof duration == 'number')
337 | ? duration + 'ms'
338 | : duration
339 | ;
340 | if(duration || duration === 0) {
341 | module.verbose('Setting animation duration', duration);
342 | $module
343 | .css({
344 | 'animation-duration': duration
345 | })
346 | ;
347 | }
348 | },
349 | direction: function(direction) {
350 | direction = direction || module.get.direction();
351 | if(direction == className.inward) {
352 | module.set.inward();
353 | }
354 | else {
355 | module.set.outward();
356 | }
357 | },
358 | looping: function() {
359 | module.debug('Transition set to loop');
360 | $module
361 | .addClass(className.looping)
362 | ;
363 | },
364 | hidden: function() {
365 | $module
366 | .addClass(className.transition)
367 | .addClass(className.hidden)
368 | ;
369 | },
370 | inward: function() {
371 | module.debug('Setting direction to inward');
372 | $module
373 | .removeClass(className.outward)
374 | .addClass(className.inward)
375 | ;
376 | },
377 | outward: function() {
378 | module.debug('Setting direction to outward');
379 | $module
380 | .removeClass(className.inward)
381 | .addClass(className.outward)
382 | ;
383 | },
384 | visible: function() {
385 | $module
386 | .addClass(className.transition)
387 | .addClass(className.visible)
388 | ;
389 | }
390 | },
391 |
392 | start: {
393 | animation: function(animationClass) {
394 | animationClass = animationClass || module.get.animationClass();
395 | module.debug('Starting tween', animationClass);
396 | $module
397 | .addClass(animationClass)
398 | .one(animationEnd + '.complete' + eventNamespace, module.complete)
399 | ;
400 | if(settings.useFailSafe) {
401 | module.add.failSafe();
402 | }
403 | module.set.duration(settings.duration);
404 | settings.onStart.call(element);
405 | }
406 | },
407 |
408 | save: {
409 | animation: function(animation) {
410 | if(!module.cache) {
411 | module.cache = {};
412 | }
413 | module.cache.animation = animation;
414 | },
415 | displayType: function(displayType) {
416 | if(displayType !== 'none') {
417 | $module.data(metadata.displayType, displayType);
418 | }
419 | },
420 | transitionExists: function(animation, exists) {
421 | _module.exports.exists[animation] = exists;
422 | module.verbose('Saving existence of transition', animation, exists);
423 | }
424 | },
425 |
426 | restore: {
427 | conditions: function() {
428 | var
429 | animation = module.get.currentAnimation()
430 | ;
431 | if(animation) {
432 | $module
433 | .removeClass(animation)
434 | ;
435 | module.verbose('Removing animation class', module.cache);
436 | }
437 | module.remove.duration();
438 | }
439 | },
440 |
441 | add: {
442 | failSafe: function() {
443 | var
444 | duration = module.get.duration()
445 | ;
446 | module.timer = setTimeout(function() {
447 | $module.triggerHandler(animationEnd);
448 | }, duration + settings.failSafeDelay);
449 | module.verbose('Adding fail safe timer', module.timer);
450 | }
451 | },
452 |
453 | remove: {
454 | animating: function() {
455 | $module.removeClass(className.animating);
456 | },
457 | animationCallbacks: function() {
458 | module.remove.queueCallback();
459 | module.remove.completeCallback();
460 | },
461 | queueCallback: function() {
462 | $module.off('.queue' + eventNamespace);
463 | },
464 | completeCallback: function() {
465 | $module.off('.complete' + eventNamespace);
466 | },
467 | display: function() {
468 | $module.css('display', '');
469 | },
470 | direction: function() {
471 | $module
472 | .removeClass(className.inward)
473 | .removeClass(className.outward)
474 | ;
475 | },
476 | duration: function() {
477 | $module
478 | .css('animation-duration', '')
479 | ;
480 | },
481 | failSafe: function() {
482 | module.verbose('Removing fail safe timer', module.timer);
483 | if(module.timer) {
484 | clearTimeout(module.timer);
485 | }
486 | },
487 | hidden: function() {
488 | $module.removeClass(className.hidden);
489 | },
490 | visible: function() {
491 | $module.removeClass(className.visible);
492 | },
493 | looping: function() {
494 | module.debug('Transitions are no longer looping');
495 | if( module.is.looping() ) {
496 | module.reset();
497 | $module
498 | .removeClass(className.looping)
499 | ;
500 | }
501 | },
502 | transition: function() {
503 | $module
504 | .removeClass(className.visible)
505 | .removeClass(className.hidden)
506 | ;
507 | }
508 | },
509 | get: {
510 | settings: function(animation, duration, onComplete) {
511 | // single settings object
512 | if(typeof animation == 'object') {
513 | return $.extend(true, {}, _module.exports.settings, animation);
514 | }
515 | // all arguments provided
516 | else if(typeof onComplete == 'function') {
517 | return $.extend({}, _module.exports.settings, {
518 | animation : animation,
519 | onComplete : onComplete,
520 | duration : duration
521 | });
522 | }
523 | // only duration provided
524 | else if(typeof duration == 'string' || typeof duration == 'number') {
525 | return $.extend({}, _module.exports.settings, {
526 | animation : animation,
527 | duration : duration
528 | });
529 | }
530 | // duration is actually settings object
531 | else if(typeof duration == 'object') {
532 | return $.extend({}, _module.exports.settings, duration, {
533 | animation : animation
534 | });
535 | }
536 | // duration is actually callback
537 | else if(typeof duration == 'function') {
538 | return $.extend({}, _module.exports.settings, {
539 | animation : animation,
540 | onComplete : duration
541 | });
542 | }
543 | // only animation provided
544 | else {
545 | return $.extend({}, _module.exports.settings, {
546 | animation : animation
547 | });
548 | }
549 | },
550 | animationClass: function(animation) {
551 | var
552 | animationClass = animation || settings.animation,
553 | directionClass = (module.can.transition() && !module.has.direction())
554 | ? module.get.direction() + ' '
555 | : ''
556 | ;
557 | return className.animating + ' '
558 | + className.transition + ' '
559 | + directionClass
560 | + animationClass
561 | ;
562 | },
563 | currentAnimation: function() {
564 | return (module.cache && module.cache.animation !== undefined)
565 | ? module.cache.animation
566 | : false
567 | ;
568 | },
569 | currentDirection: function() {
570 | return module.is.inward()
571 | ? className.inward
572 | : className.outward
573 | ;
574 | },
575 | direction: function() {
576 | return module.is.hidden() || !module.is.visible()
577 | ? className.inward
578 | : className.outward
579 | ;
580 | },
581 | animationDirection: function(animation) {
582 | var
583 | direction
584 | ;
585 | animation = animation || settings.animation;
586 | if(typeof animation === 'string') {
587 | animation = animation.split(' ');
588 | // search animation name for out/in class
589 | $.each(animation, function(index, word){
590 | if(word === className.inward) {
591 | direction = className.inward;
592 | }
593 | else if(word === className.outward) {
594 | direction = className.outward;
595 | }
596 | });
597 | }
598 | // return found direction
599 | if(direction) {
600 | return direction;
601 | }
602 | return false;
603 | },
604 | duration: function(duration) {
605 | duration = duration || settings.duration;
606 | if(duration === false) {
607 | duration = $module.css('animation-duration') || 0;
608 | }
609 | return (typeof duration === 'string')
610 | ? (duration.indexOf('ms') > -1)
611 | ? parseFloat(duration)
612 | : parseFloat(duration) * 1000
613 | : duration
614 | ;
615 | },
616 | displayType: function(shouldDetermine) {
617 | shouldDetermine = (shouldDetermine !== undefined)
618 | ? shouldDetermine
619 | : true
620 | ;
621 | if(settings.displayType) {
622 | return settings.displayType;
623 | }
624 | if(shouldDetermine && $module.data(metadata.displayType) === undefined) {
625 | // create fake element to determine display state
626 | module.can.transition(true);
627 | }
628 | return $module.data(metadata.displayType);
629 | },
630 | userStyle: function(style) {
631 | style = style || $module.attr('style') || '';
632 | return style.replace(/display.*?;/, '');
633 | },
634 | transitionExists: function(animation) {
635 | return _module.exports.exists[animation];
636 | },
637 | animationStartEvent: function() {
638 | var
639 | element = document.createElement('div'),
640 | animations = {
641 | 'animation' :'animationstart',
642 | 'OAnimation' :'oAnimationStart',
643 | 'MozAnimation' :'mozAnimationStart',
644 | 'WebkitAnimation' :'webkitAnimationStart'
645 | },
646 | animation
647 | ;
648 | for(animation in animations){
649 | if( element.style[animation] !== undefined ){
650 | return animations[animation];
651 | }
652 | }
653 | return false;
654 | },
655 | animationEndEvent: function() {
656 | var
657 | element = document.createElement('div'),
658 | animations = {
659 | 'animation' :'animationend',
660 | 'OAnimation' :'oAnimationEnd',
661 | 'MozAnimation' :'mozAnimationEnd',
662 | 'WebkitAnimation' :'webkitAnimationEnd'
663 | },
664 | animation
665 | ;
666 | for(animation in animations){
667 | if( element.style[animation] !== undefined ){
668 | return animations[animation];
669 | }
670 | }
671 | return false;
672 | }
673 |
674 | },
675 |
676 | can: {
677 | transition: function(forced) {
678 | var
679 | animation = settings.animation,
680 | transitionExists = module.get.transitionExists(animation),
681 | displayType = module.get.displayType(false),
682 | elementClass,
683 | tagName,
684 | $clone,
685 | currentAnimation,
686 | inAnimation,
687 | directionExists
688 | ;
689 | if( transitionExists === undefined || forced) {
690 | module.verbose('Determining whether animation exists');
691 | elementClass = $module.attr('class');
692 | tagName = $module.prop('tagName');
693 |
694 | $clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module);
695 | currentAnimation = $clone
696 | .addClass(animation)
697 | .removeClass(className.inward)
698 | .removeClass(className.outward)
699 | .addClass(className.animating)
700 | .addClass(className.transition)
701 | .css('animationName')
702 | ;
703 | inAnimation = $clone
704 | .addClass(className.inward)
705 | .css('animationName')
706 | ;
707 | if(!displayType) {
708 | displayType = $clone
709 | .attr('class', elementClass)
710 | .removeAttr('style')
711 | .removeClass(className.hidden)
712 | .removeClass(className.visible)
713 | .show()
714 | .css('display')
715 | ;
716 | module.verbose('Determining final display state', displayType);
717 | module.save.displayType(displayType);
718 | }
719 |
720 | $clone.remove();
721 | if(currentAnimation != inAnimation) {
722 | module.debug('Direction exists for animation', animation);
723 | directionExists = true;
724 | }
725 | else if(currentAnimation == 'none' || !currentAnimation) {
726 | module.debug('No animation defined in css', animation);
727 | return;
728 | }
729 | else {
730 | module.debug('Static animation found', animation, displayType);
731 | directionExists = false;
732 | }
733 | module.save.transitionExists(animation, directionExists);
734 | }
735 | return (transitionExists !== undefined)
736 | ? transitionExists
737 | : directionExists
738 | ;
739 | },
740 | animate: function() {
741 | // can transition does not return a value if animation does not exist
742 | return (module.can.transition() !== undefined);
743 | }
744 | },
745 |
746 | is: {
747 | animating: function() {
748 | return $module.hasClass(className.animating);
749 | },
750 | inward: function() {
751 | return $module.hasClass(className.inward);
752 | },
753 | outward: function() {
754 | return $module.hasClass(className.outward);
755 | },
756 | looping: function() {
757 | return $module.hasClass(className.looping);
758 | },
759 | occurring: function(animation) {
760 | animation = animation || settings.animation;
761 | animation = '.' + animation.replace(' ', '.');
762 | return ( $module.filter(animation).length > 0 );
763 | },
764 | visible: function() {
765 | return $module.is(':visible');
766 | },
767 | hidden: function() {
768 | return $module.css('visibility') === 'hidden';
769 | },
770 | supported: function() {
771 | return(animationEnd !== false);
772 | }
773 | },
774 |
775 | hide: function() {
776 | module.verbose('Hiding element');
777 | if( module.is.animating() ) {
778 | module.reset();
779 | }
780 | element.blur(); // IE will trigger focus change if element is not blurred before hiding
781 | module.remove.display();
782 | module.remove.visible();
783 | module.set.hidden();
784 | module.force.hidden();
785 | settings.onHide.call(element);
786 | settings.onComplete.call(element);
787 | // module.repaint();
788 | },
789 |
790 | show: function(display) {
791 | module.verbose('Showing element', display);
792 | module.remove.hidden();
793 | module.set.visible();
794 | module.force.visible();
795 | settings.onShow.call(element);
796 | settings.onComplete.call(element);
797 | // module.repaint();
798 | },
799 |
800 | toggle: function() {
801 | if( module.is.visible() ) {
802 | module.hide();
803 | }
804 | else {
805 | module.show();
806 | }
807 | },
808 |
809 | stop: function() {
810 | module.debug('Stopping current animation');
811 | $module.triggerHandler(animationEnd);
812 | },
813 |
814 | stopAll: function() {
815 | module.debug('Stopping all animation');
816 | module.remove.queueCallback();
817 | $module.triggerHandler(animationEnd);
818 | },
819 |
820 | clear: {
821 | queue: function() {
822 | module.debug('Clearing animation queue');
823 | module.remove.queueCallback();
824 | }
825 | },
826 |
827 | enable: function() {
828 | module.verbose('Starting animation');
829 | $module.removeClass(className.disabled);
830 | },
831 |
832 | disable: function() {
833 | module.debug('Stopping animation');
834 | $module.addClass(className.disabled);
835 | },
836 |
837 | setting: function(name, value) {
838 | module.debug('Changing setting', name, value);
839 | if( $.isPlainObject(name) ) {
840 | $.extend(true, settings, name);
841 | }
842 | else if(value !== undefined) {
843 | if($.isPlainObject(settings[name])) {
844 | $.extend(true, settings[name], value);
845 | }
846 | else {
847 | settings[name] = value;
848 | }
849 | }
850 | else {
851 | return settings[name];
852 | }
853 | },
854 | internal: function(name, value) {
855 | if( $.isPlainObject(name) ) {
856 | $.extend(true, module, name);
857 | }
858 | else if(value !== undefined) {
859 | module[name] = value;
860 | }
861 | else {
862 | return module[name];
863 | }
864 | },
865 | debug: function() {
866 | if(!settings.silent && settings.debug) {
867 | if(settings.performance) {
868 | module.performance.log(arguments);
869 | }
870 | else {
871 | module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
872 | module.debug.apply(console, arguments);
873 | }
874 | }
875 | },
876 | verbose: function() {
877 | if(!settings.silent && settings.verbose && settings.debug) {
878 | if(settings.performance) {
879 | module.performance.log(arguments);
880 | }
881 | else {
882 | module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
883 | module.verbose.apply(console, arguments);
884 | }
885 | }
886 | },
887 | error: function() {
888 | if(!settings.silent) {
889 | module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
890 | module.error.apply(console, arguments);
891 | }
892 | },
893 | performance: {
894 | log: function(message) {
895 | var
896 | currentTime,
897 | executionTime,
898 | previousTime
899 | ;
900 | if(settings.performance) {
901 | currentTime = new Date().getTime();
902 | previousTime = time || currentTime;
903 | executionTime = currentTime - previousTime;
904 | time = currentTime;
905 | performance.push({
906 | 'Name' : message[0],
907 | 'Arguments' : [].slice.call(message, 1) || '',
908 | 'Element' : element,
909 | 'Execution Time' : executionTime
910 | });
911 | }
912 | clearTimeout(module.performance.timer);
913 | module.performance.timer = setTimeout(module.performance.display, 500);
914 | },
915 | display: function() {
916 | var
917 | title = settings.name + ':',
918 | totalTime = 0
919 | ;
920 | time = false;
921 | clearTimeout(module.performance.timer);
922 | $.each(performance, function(index, data) {
923 | totalTime += data['Execution Time'];
924 | });
925 | title += ' ' + totalTime + 'ms';
926 | if(moduleSelector) {
927 | title += ' \'' + moduleSelector + '\'';
928 | }
929 | if($allModules.length > 1) {
930 | title += ' ' + '(' + $allModules.length + ')';
931 | }
932 | if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
933 | console.groupCollapsed(title);
934 | if(console.table) {
935 | console.table(performance);
936 | }
937 | else {
938 | $.each(performance, function(index, data) {
939 | console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
940 | });
941 | }
942 | console.groupEnd();
943 | }
944 | performance = [];
945 | }
946 | },
947 | // modified for transition to return invoke success
948 | invoke: function(query, passedArguments, context) {
949 | var
950 | object = instance,
951 | maxDepth,
952 | found,
953 | response
954 | ;
955 | passedArguments = passedArguments || queryArguments;
956 | context = element || context;
957 | if(typeof query == 'string' && object !== undefined) {
958 | query = query.split(/[\. ]/);
959 | maxDepth = query.length - 1;
960 | $.each(query, function(depth, value) {
961 | var camelCaseValue = (depth != maxDepth)
962 | ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
963 | : query
964 | ;
965 | if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
966 | object = object[camelCaseValue];
967 | }
968 | else if( object[camelCaseValue] !== undefined ) {
969 | found = object[camelCaseValue];
970 | return false;
971 | }
972 | else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
973 | object = object[value];
974 | }
975 | else if( object[value] !== undefined ) {
976 | found = object[value];
977 | return false;
978 | }
979 | else {
980 | return false;
981 | }
982 | });
983 | }
984 | if ( $.isFunction( found ) ) {
985 | response = found.apply(context, passedArguments);
986 | }
987 | else if(found !== undefined) {
988 | response = found;
989 | }
990 |
991 | if($.isArray(returnedValue)) {
992 | returnedValue.push(response);
993 | }
994 | else if(returnedValue !== undefined) {
995 | returnedValue = [returnedValue, response];
996 | }
997 | else if(response !== undefined) {
998 | returnedValue = response;
999 | }
1000 | return (found !== undefined)
1001 | ? found
1002 | : false
1003 | ;
1004 | }
1005 | };
1006 | module.initialize();
1007 | })
1008 | ;
1009 | return (returnedValue !== undefined)
1010 | ? returnedValue
1011 | : this
1012 | ;
1013 | };
1014 |
1015 | // Records if CSS transition is available
1016 | _module.exports.exists = {};
1017 |
1018 | _module.exports.settings = {
1019 |
1020 | // module info
1021 | name : 'Transition',
1022 |
1023 | // hide all output from this component regardless of other settings
1024 | silent : false,
1025 |
1026 | // debug content outputted to console
1027 | debug : false,
1028 |
1029 | // verbose debug output
1030 | verbose : false,
1031 |
1032 | // performance data output
1033 | performance : true,
1034 |
1035 | // event namespace
1036 | namespace : 'transition',
1037 |
1038 | // delay between animations in group
1039 | interval : 0,
1040 |
1041 | // whether group animations should be reversed
1042 | reverse : 'auto',
1043 |
1044 | // animation callback event
1045 | onStart : function() {},
1046 | onComplete : function() {},
1047 | onShow : function() {},
1048 | onHide : function() {},
1049 |
1050 | // whether timeout should be used to ensure callback fires in cases animationend does not
1051 | useFailSafe : true,
1052 |
1053 | // delay in ms for fail safe
1054 | failSafeDelay : 100,
1055 |
1056 | // whether EXACT animation can occur twice in a row
1057 | allowRepeats : false,
1058 |
1059 | // Override final display type on visible
1060 | displayType : false,
1061 |
1062 | // animation duration
1063 | animation : 'fade',
1064 | duration : false,
1065 |
1066 | // new animations will occur after previous ones
1067 | queue : true,
1068 |
1069 | metadata : {
1070 | displayType: 'display'
1071 | },
1072 |
1073 | className : {
1074 | animating : 'animating',
1075 | disabled : 'disabled',
1076 | hidden : 'hidden',
1077 | inward : 'in',
1078 | loading : 'loading',
1079 | looping : 'looping',
1080 | outward : 'out',
1081 | transition : 'transition',
1082 | visible : 'visible'
1083 | },
1084 |
1085 | // possible errors
1086 | error: {
1087 | noAnimation : 'Element is no longer attached to DOM. Unable to animate. Use silent setting to surpress this warning in production.',
1088 | repeated : 'That animation is already occurring, cancelling repeated animation',
1089 | method : 'The method you called is not defined',
1090 | support : 'This browser does not support CSS animations'
1091 | }
1092 |
1093 | };
1094 |
1095 |
1096 | })( require("jquery"), window, document );
1097 |
--------------------------------------------------------------------------------
/package.js:
--------------------------------------------------------------------------------
1 |
2 | Package.describe({
3 | name : 'semantic:ui-transition',
4 | summary : 'Semantic UI - Transition: Single component release',
5 | version : '2.2.10',
6 | git : 'git://github.com/Semantic-Org/UI-Transition.git',
7 | });
8 |
9 | Package.onUse(function(api) {
10 | api.versionsFrom('1.0');
11 | api.addFiles([
12 | 'transition.css',
13 | 'transition.js'
14 | ], 'client');
15 | });
16 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "semantic-ui-transition",
3 | "version": "2.5.0",
4 | "title": "Semantic UI - Transition",
5 | "description": "Single component release of transition",
6 | "homepage": "http://www.semantic-ui.com",
7 | "author": "Jack Lukic ",
8 | "license": "MIT",
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/Semantic-Org/UI-Transition.git"
12 | },
13 | "bugs": {
14 | "url": "https://github.com/Semantic-Org/Semantic-UI/issues"
15 | },
16 | "devDependencies": {}
17 | }
--------------------------------------------------------------------------------
/transition.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.5.0 - Transition
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 |
12 | /*******************************
13 | Transitions
14 | *******************************/
15 |
16 | .transition {
17 | -webkit-animation-iteration-count: 1;
18 | animation-iteration-count: 1;
19 | -webkit-animation-duration: 300ms;
20 | animation-duration: 300ms;
21 | -webkit-animation-timing-function: ease;
22 | animation-timing-function: ease;
23 | -webkit-animation-fill-mode: both;
24 | animation-fill-mode: both;
25 | }
26 |
27 |
28 | /*******************************
29 | States
30 | *******************************/
31 |
32 |
33 | /* Animating */
34 | .animating.transition {
35 | -webkit-backface-visibility: hidden;
36 | backface-visibility: hidden;
37 | visibility: visible !important;
38 | }
39 |
40 | /* Loading */
41 | .loading.transition {
42 | position: absolute;
43 | top: -99999px;
44 | left: -99999px;
45 | }
46 |
47 | /* Hidden */
48 | .hidden.transition {
49 | display: none;
50 | visibility: hidden;
51 | }
52 |
53 | /* Visible */
54 | .visible.transition {
55 | display: block !important;
56 | visibility: visible !important;
57 |
58 | /* backface-visibility: @backfaceVisibility;
59 | transform: @use3DAcceleration;*/
60 | }
61 | /* Disabled */
62 | .disabled.transition {
63 | -webkit-animation-play-state: paused;
64 | animation-play-state: paused;
65 | }
66 |
67 |
68 | /*******************************
69 | Variations
70 | *******************************/
71 |
72 | .looping.transition {
73 | -webkit-animation-iteration-count: infinite;
74 | animation-iteration-count: infinite;
75 | }
76 |
77 |
78 | /*******************************
79 | Transitions
80 | *******************************/
81 |
82 | /*
83 | Some transitions adapted from Animate CSS
84 | https://github.com/daneden/animate.css
85 |
86 | Additional transitions adapted from Glide
87 | by Nick Pettit - https://github.com/nickpettit/glide
88 | */
89 |
90 | /*--------------
91 | Browse
92 | ---------------*/
93 |
94 | .transition.browse {
95 | -webkit-animation-duration: 500ms;
96 | animation-duration: 500ms;
97 | }
98 | .transition.browse.in {
99 | -webkit-animation-name: browseIn;
100 | animation-name: browseIn;
101 | }
102 | .transition.browse.out,
103 | .transition.browse.left.out {
104 | -webkit-animation-name: browseOutLeft;
105 | animation-name: browseOutLeft;
106 | }
107 | .transition.browse.right.out {
108 | -webkit-animation-name: browseOutRight;
109 | animation-name: browseOutRight;
110 | }
111 |
112 | /* In */
113 | @-webkit-keyframes browseIn {
114 | 0% {
115 | transform: scale(0.8) translateZ(0px);
116 | z-index: -1;
117 | }
118 | 10% {
119 | transform: scale(0.8) translateZ(0px);
120 | z-index: -1;
121 | opacity: 0.7;
122 | }
123 | 80% {
124 | transform: scale(1.05) translateZ(0px);
125 | opacity: 1;
126 | z-index: 999;
127 | }
128 | 100% {
129 | transform: scale(1) translateZ(0px);
130 | z-index: 999;
131 | }
132 | }
133 | @keyframes browseIn {
134 | 0% {
135 | transform: scale(0.8) translateZ(0px);
136 | z-index: -1;
137 | }
138 | 10% {
139 | transform: scale(0.8) translateZ(0px);
140 | z-index: -1;
141 | opacity: 0.7;
142 | }
143 | 80% {
144 | transform: scale(1.05) translateZ(0px);
145 | opacity: 1;
146 | z-index: 999;
147 | }
148 | 100% {
149 | transform: scale(1) translateZ(0px);
150 | z-index: 999;
151 | }
152 | }
153 |
154 | /* Out */
155 | @-webkit-keyframes browseOutLeft {
156 | 0% {
157 | z-index: 999;
158 | transform: translateX(0%) rotateY(0deg) rotateX(0deg);
159 | }
160 | 50% {
161 | z-index: -1;
162 | transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
163 | }
164 | 80% {
165 | opacity: 1;
166 | }
167 | 100% {
168 | z-index: -1;
169 | transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
170 | opacity: 0;
171 | }
172 | }
173 | @keyframes browseOutLeft {
174 | 0% {
175 | z-index: 999;
176 | transform: translateX(0%) rotateY(0deg) rotateX(0deg);
177 | }
178 | 50% {
179 | z-index: -1;
180 | transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
181 | }
182 | 80% {
183 | opacity: 1;
184 | }
185 | 100% {
186 | z-index: -1;
187 | transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
188 | opacity: 0;
189 | }
190 | }
191 | @-webkit-keyframes browseOutRight {
192 | 0% {
193 | z-index: 999;
194 | transform: translateX(0%) rotateY(0deg) rotateX(0deg);
195 | }
196 | 50% {
197 | z-index: 1;
198 | transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
199 | }
200 | 80% {
201 | opacity: 1;
202 | }
203 | 100% {
204 | z-index: 1;
205 | transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
206 | opacity: 0;
207 | }
208 | }
209 | @keyframes browseOutRight {
210 | 0% {
211 | z-index: 999;
212 | transform: translateX(0%) rotateY(0deg) rotateX(0deg);
213 | }
214 | 50% {
215 | z-index: 1;
216 | transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
217 | }
218 | 80% {
219 | opacity: 1;
220 | }
221 | 100% {
222 | z-index: 1;
223 | transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
224 | opacity: 0;
225 | }
226 | }
227 |
228 | /*--------------
229 | Drop
230 | ---------------*/
231 |
232 | .drop.transition {
233 | transform-origin: top center;
234 | -webkit-animation-duration: 400ms;
235 | animation-duration: 400ms;
236 | -webkit-animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
237 | animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
238 | }
239 | .drop.transition.in {
240 | -webkit-animation-name: dropIn;
241 | animation-name: dropIn;
242 | }
243 | .drop.transition.out {
244 | -webkit-animation-name: dropOut;
245 | animation-name: dropOut;
246 | }
247 |
248 | /* Drop */
249 | @-webkit-keyframes dropIn {
250 | 0% {
251 | opacity: 0;
252 | transform: scale(0);
253 | }
254 | 100% {
255 | opacity: 1;
256 | transform: scale(1);
257 | }
258 | }
259 | @keyframes dropIn {
260 | 0% {
261 | opacity: 0;
262 | transform: scale(0);
263 | }
264 | 100% {
265 | opacity: 1;
266 | transform: scale(1);
267 | }
268 | }
269 | @-webkit-keyframes dropOut {
270 | 0% {
271 | opacity: 1;
272 | transform: scale(1);
273 | }
274 | 100% {
275 | opacity: 0;
276 | transform: scale(0);
277 | }
278 | }
279 | @keyframes dropOut {
280 | 0% {
281 | opacity: 1;
282 | transform: scale(1);
283 | }
284 | 100% {
285 | opacity: 0;
286 | transform: scale(0);
287 | }
288 | }
289 |
290 | /*--------------
291 | Fade
292 | ---------------*/
293 |
294 | .transition.fade.in {
295 | -webkit-animation-name: fadeIn;
296 | animation-name: fadeIn;
297 | }
298 | .transition[class*="fade up"].in {
299 | -webkit-animation-name: fadeInUp;
300 | animation-name: fadeInUp;
301 | }
302 | .transition[class*="fade down"].in {
303 | -webkit-animation-name: fadeInDown;
304 | animation-name: fadeInDown;
305 | }
306 | .transition[class*="fade left"].in {
307 | -webkit-animation-name: fadeInLeft;
308 | animation-name: fadeInLeft;
309 | }
310 | .transition[class*="fade right"].in {
311 | -webkit-animation-name: fadeInRight;
312 | animation-name: fadeInRight;
313 | }
314 | .transition.fade.out {
315 | -webkit-animation-name: fadeOut;
316 | animation-name: fadeOut;
317 | }
318 | .transition[class*="fade up"].out {
319 | -webkit-animation-name: fadeOutUp;
320 | animation-name: fadeOutUp;
321 | }
322 | .transition[class*="fade down"].out {
323 | -webkit-animation-name: fadeOutDown;
324 | animation-name: fadeOutDown;
325 | }
326 | .transition[class*="fade left"].out {
327 | -webkit-animation-name: fadeOutLeft;
328 | animation-name: fadeOutLeft;
329 | }
330 | .transition[class*="fade right"].out {
331 | -webkit-animation-name: fadeOutRight;
332 | animation-name: fadeOutRight;
333 | }
334 |
335 | /* In */
336 | @-webkit-keyframes fadeIn {
337 | 0% {
338 | opacity: 0;
339 | }
340 | 100% {
341 | opacity: 1;
342 | }
343 | }
344 | @keyframes fadeIn {
345 | 0% {
346 | opacity: 0;
347 | }
348 | 100% {
349 | opacity: 1;
350 | }
351 | }
352 | @-webkit-keyframes fadeInUp {
353 | 0% {
354 | opacity: 0;
355 | transform: translateY(10%);
356 | }
357 | 100% {
358 | opacity: 1;
359 | transform: translateY(0%);
360 | }
361 | }
362 | @keyframes fadeInUp {
363 | 0% {
364 | opacity: 0;
365 | transform: translateY(10%);
366 | }
367 | 100% {
368 | opacity: 1;
369 | transform: translateY(0%);
370 | }
371 | }
372 | @-webkit-keyframes fadeInDown {
373 | 0% {
374 | opacity: 0;
375 | transform: translateY(-10%);
376 | }
377 | 100% {
378 | opacity: 1;
379 | transform: translateY(0%);
380 | }
381 | }
382 | @keyframes fadeInDown {
383 | 0% {
384 | opacity: 0;
385 | transform: translateY(-10%);
386 | }
387 | 100% {
388 | opacity: 1;
389 | transform: translateY(0%);
390 | }
391 | }
392 | @-webkit-keyframes fadeInLeft {
393 | 0% {
394 | opacity: 0;
395 | transform: translateX(10%);
396 | }
397 | 100% {
398 | opacity: 1;
399 | transform: translateX(0%);
400 | }
401 | }
402 | @keyframes fadeInLeft {
403 | 0% {
404 | opacity: 0;
405 | transform: translateX(10%);
406 | }
407 | 100% {
408 | opacity: 1;
409 | transform: translateX(0%);
410 | }
411 | }
412 | @-webkit-keyframes fadeInRight {
413 | 0% {
414 | opacity: 0;
415 | transform: translateX(-10%);
416 | }
417 | 100% {
418 | opacity: 1;
419 | transform: translateX(0%);
420 | }
421 | }
422 | @keyframes fadeInRight {
423 | 0% {
424 | opacity: 0;
425 | transform: translateX(-10%);
426 | }
427 | 100% {
428 | opacity: 1;
429 | transform: translateX(0%);
430 | }
431 | }
432 |
433 | /* Out */
434 | @-webkit-keyframes fadeOut {
435 | 0% {
436 | opacity: 1;
437 | }
438 | 100% {
439 | opacity: 0;
440 | }
441 | }
442 | @keyframes fadeOut {
443 | 0% {
444 | opacity: 1;
445 | }
446 | 100% {
447 | opacity: 0;
448 | }
449 | }
450 | @-webkit-keyframes fadeOutUp {
451 | 0% {
452 | opacity: 1;
453 | transform: translateY(0%);
454 | }
455 | 100% {
456 | opacity: 0;
457 | transform: translateY(5%);
458 | }
459 | }
460 | @keyframes fadeOutUp {
461 | 0% {
462 | opacity: 1;
463 | transform: translateY(0%);
464 | }
465 | 100% {
466 | opacity: 0;
467 | transform: translateY(5%);
468 | }
469 | }
470 | @-webkit-keyframes fadeOutDown {
471 | 0% {
472 | opacity: 1;
473 | transform: translateY(0%);
474 | }
475 | 100% {
476 | opacity: 0;
477 | transform: translateY(-5%);
478 | }
479 | }
480 | @keyframes fadeOutDown {
481 | 0% {
482 | opacity: 1;
483 | transform: translateY(0%);
484 | }
485 | 100% {
486 | opacity: 0;
487 | transform: translateY(-5%);
488 | }
489 | }
490 | @-webkit-keyframes fadeOutLeft {
491 | 0% {
492 | opacity: 1;
493 | transform: translateX(0%);
494 | }
495 | 100% {
496 | opacity: 0;
497 | transform: translateX(5%);
498 | }
499 | }
500 | @keyframes fadeOutLeft {
501 | 0% {
502 | opacity: 1;
503 | transform: translateX(0%);
504 | }
505 | 100% {
506 | opacity: 0;
507 | transform: translateX(5%);
508 | }
509 | }
510 | @-webkit-keyframes fadeOutRight {
511 | 0% {
512 | opacity: 1;
513 | transform: translateX(0%);
514 | }
515 | 100% {
516 | opacity: 0;
517 | transform: translateX(-5%);
518 | }
519 | }
520 | @keyframes fadeOutRight {
521 | 0% {
522 | opacity: 1;
523 | transform: translateX(0%);
524 | }
525 | 100% {
526 | opacity: 0;
527 | transform: translateX(-5%);
528 | }
529 | }
530 |
531 | /*--------------
532 | Flips
533 | ---------------*/
534 |
535 | .flip.transition.in,
536 | .flip.transition.out {
537 | -webkit-animation-duration: 600ms;
538 | animation-duration: 600ms;
539 | }
540 | .horizontal.flip.transition.in {
541 | -webkit-animation-name: horizontalFlipIn;
542 | animation-name: horizontalFlipIn;
543 | }
544 | .horizontal.flip.transition.out {
545 | -webkit-animation-name: horizontalFlipOut;
546 | animation-name: horizontalFlipOut;
547 | }
548 | .vertical.flip.transition.in {
549 | -webkit-animation-name: verticalFlipIn;
550 | animation-name: verticalFlipIn;
551 | }
552 | .vertical.flip.transition.out {
553 | -webkit-animation-name: verticalFlipOut;
554 | animation-name: verticalFlipOut;
555 | }
556 |
557 | /* In */
558 | @-webkit-keyframes horizontalFlipIn {
559 | 0% {
560 | transform: perspective(2000px) rotateY(-90deg);
561 | opacity: 0;
562 | }
563 | 100% {
564 | transform: perspective(2000px) rotateY(0deg);
565 | opacity: 1;
566 | }
567 | }
568 | @keyframes horizontalFlipIn {
569 | 0% {
570 | transform: perspective(2000px) rotateY(-90deg);
571 | opacity: 0;
572 | }
573 | 100% {
574 | transform: perspective(2000px) rotateY(0deg);
575 | opacity: 1;
576 | }
577 | }
578 | @-webkit-keyframes verticalFlipIn {
579 | 0% {
580 | transform: perspective(2000px) rotateX(-90deg);
581 | opacity: 0;
582 | }
583 | 100% {
584 | transform: perspective(2000px) rotateX(0deg);
585 | opacity: 1;
586 | }
587 | }
588 | @keyframes verticalFlipIn {
589 | 0% {
590 | transform: perspective(2000px) rotateX(-90deg);
591 | opacity: 0;
592 | }
593 | 100% {
594 | transform: perspective(2000px) rotateX(0deg);
595 | opacity: 1;
596 | }
597 | }
598 |
599 | /* Out */
600 | @-webkit-keyframes horizontalFlipOut {
601 | 0% {
602 | transform: perspective(2000px) rotateY(0deg);
603 | opacity: 1;
604 | }
605 | 100% {
606 | transform: perspective(2000px) rotateY(90deg);
607 | opacity: 0;
608 | }
609 | }
610 | @keyframes horizontalFlipOut {
611 | 0% {
612 | transform: perspective(2000px) rotateY(0deg);
613 | opacity: 1;
614 | }
615 | 100% {
616 | transform: perspective(2000px) rotateY(90deg);
617 | opacity: 0;
618 | }
619 | }
620 | @-webkit-keyframes verticalFlipOut {
621 | 0% {
622 | transform: perspective(2000px) rotateX(0deg);
623 | opacity: 1;
624 | }
625 | 100% {
626 | transform: perspective(2000px) rotateX(-90deg);
627 | opacity: 0;
628 | }
629 | }
630 | @keyframes verticalFlipOut {
631 | 0% {
632 | transform: perspective(2000px) rotateX(0deg);
633 | opacity: 1;
634 | }
635 | 100% {
636 | transform: perspective(2000px) rotateX(-90deg);
637 | opacity: 0;
638 | }
639 | }
640 |
641 | /*--------------
642 | Scale
643 | ---------------*/
644 |
645 | .scale.transition.in {
646 | -webkit-animation-name: scaleIn;
647 | animation-name: scaleIn;
648 | }
649 | .scale.transition.out {
650 | -webkit-animation-name: scaleOut;
651 | animation-name: scaleOut;
652 | }
653 | @-webkit-keyframes scaleIn {
654 | 0% {
655 | opacity: 0;
656 | transform: scale(0.8);
657 | }
658 | 100% {
659 | opacity: 1;
660 | transform: scale(1);
661 | }
662 | }
663 | @keyframes scaleIn {
664 | 0% {
665 | opacity: 0;
666 | transform: scale(0.8);
667 | }
668 | 100% {
669 | opacity: 1;
670 | transform: scale(1);
671 | }
672 | }
673 |
674 | /* Out */
675 | @-webkit-keyframes scaleOut {
676 | 0% {
677 | opacity: 1;
678 | transform: scale(1);
679 | }
680 | 100% {
681 | opacity: 0;
682 | transform: scale(0.9);
683 | }
684 | }
685 | @keyframes scaleOut {
686 | 0% {
687 | opacity: 1;
688 | transform: scale(1);
689 | }
690 | 100% {
691 | opacity: 0;
692 | transform: scale(0.9);
693 | }
694 | }
695 |
696 | /*--------------
697 | Fly
698 | ---------------*/
699 |
700 |
701 | /* Inward */
702 | .transition.fly {
703 | -webkit-animation-duration: 0.6s;
704 | animation-duration: 0.6s;
705 | transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
706 | }
707 | .transition.fly.in {
708 | -webkit-animation-name: flyIn;
709 | animation-name: flyIn;
710 | }
711 | .transition[class*="fly up"].in {
712 | -webkit-animation-name: flyInUp;
713 | animation-name: flyInUp;
714 | }
715 | .transition[class*="fly down"].in {
716 | -webkit-animation-name: flyInDown;
717 | animation-name: flyInDown;
718 | }
719 | .transition[class*="fly left"].in {
720 | -webkit-animation-name: flyInLeft;
721 | animation-name: flyInLeft;
722 | }
723 | .transition[class*="fly right"].in {
724 | -webkit-animation-name: flyInRight;
725 | animation-name: flyInRight;
726 | }
727 |
728 | /* Outward */
729 | .transition.fly.out {
730 | -webkit-animation-name: flyOut;
731 | animation-name: flyOut;
732 | }
733 | .transition[class*="fly up"].out {
734 | -webkit-animation-name: flyOutUp;
735 | animation-name: flyOutUp;
736 | }
737 | .transition[class*="fly down"].out {
738 | -webkit-animation-name: flyOutDown;
739 | animation-name: flyOutDown;
740 | }
741 | .transition[class*="fly left"].out {
742 | -webkit-animation-name: flyOutLeft;
743 | animation-name: flyOutLeft;
744 | }
745 | .transition[class*="fly right"].out {
746 | -webkit-animation-name: flyOutRight;
747 | animation-name: flyOutRight;
748 | }
749 |
750 | /* In */
751 | @-webkit-keyframes flyIn {
752 | 0% {
753 | opacity: 0;
754 | transform: scale3d(0.3, 0.3, 0.3);
755 | }
756 | 20% {
757 | transform: scale3d(1.1, 1.1, 1.1);
758 | }
759 | 40% {
760 | transform: scale3d(0.9, 0.9, 0.9);
761 | }
762 | 60% {
763 | opacity: 1;
764 | transform: scale3d(1.03, 1.03, 1.03);
765 | }
766 | 80% {
767 | transform: scale3d(0.97, 0.97, 0.97);
768 | }
769 | 100% {
770 | opacity: 1;
771 | transform: scale3d(1, 1, 1);
772 | }
773 | }
774 | @keyframes flyIn {
775 | 0% {
776 | opacity: 0;
777 | transform: scale3d(0.3, 0.3, 0.3);
778 | }
779 | 20% {
780 | transform: scale3d(1.1, 1.1, 1.1);
781 | }
782 | 40% {
783 | transform: scale3d(0.9, 0.9, 0.9);
784 | }
785 | 60% {
786 | opacity: 1;
787 | transform: scale3d(1.03, 1.03, 1.03);
788 | }
789 | 80% {
790 | transform: scale3d(0.97, 0.97, 0.97);
791 | }
792 | 100% {
793 | opacity: 1;
794 | transform: scale3d(1, 1, 1);
795 | }
796 | }
797 | @-webkit-keyframes flyInUp {
798 | 0% {
799 | opacity: 0;
800 | transform: translate3d(0, 1500px, 0);
801 | }
802 | 60% {
803 | opacity: 1;
804 | transform: translate3d(0, -20px, 0);
805 | }
806 | 75% {
807 | transform: translate3d(0, 10px, 0);
808 | }
809 | 90% {
810 | transform: translate3d(0, -5px, 0);
811 | }
812 | 100% {
813 | transform: translate3d(0, 0, 0);
814 | }
815 | }
816 | @keyframes flyInUp {
817 | 0% {
818 | opacity: 0;
819 | transform: translate3d(0, 1500px, 0);
820 | }
821 | 60% {
822 | opacity: 1;
823 | transform: translate3d(0, -20px, 0);
824 | }
825 | 75% {
826 | transform: translate3d(0, 10px, 0);
827 | }
828 | 90% {
829 | transform: translate3d(0, -5px, 0);
830 | }
831 | 100% {
832 | transform: translate3d(0, 0, 0);
833 | }
834 | }
835 | @-webkit-keyframes flyInDown {
836 | 0% {
837 | opacity: 0;
838 | transform: translate3d(0, -1500px, 0);
839 | }
840 | 60% {
841 | opacity: 1;
842 | transform: translate3d(0, 25px, 0);
843 | }
844 | 75% {
845 | transform: translate3d(0, -10px, 0);
846 | }
847 | 90% {
848 | transform: translate3d(0, 5px, 0);
849 | }
850 | 100% {
851 | transform: none;
852 | }
853 | }
854 | @keyframes flyInDown {
855 | 0% {
856 | opacity: 0;
857 | transform: translate3d(0, -1500px, 0);
858 | }
859 | 60% {
860 | opacity: 1;
861 | transform: translate3d(0, 25px, 0);
862 | }
863 | 75% {
864 | transform: translate3d(0, -10px, 0);
865 | }
866 | 90% {
867 | transform: translate3d(0, 5px, 0);
868 | }
869 | 100% {
870 | transform: none;
871 | }
872 | }
873 | @-webkit-keyframes flyInLeft {
874 | 0% {
875 | opacity: 0;
876 | transform: translate3d(1500px, 0, 0);
877 | }
878 | 60% {
879 | opacity: 1;
880 | transform: translate3d(-25px, 0, 0);
881 | }
882 | 75% {
883 | transform: translate3d(10px, 0, 0);
884 | }
885 | 90% {
886 | transform: translate3d(-5px, 0, 0);
887 | }
888 | 100% {
889 | transform: none;
890 | }
891 | }
892 | @keyframes flyInLeft {
893 | 0% {
894 | opacity: 0;
895 | transform: translate3d(1500px, 0, 0);
896 | }
897 | 60% {
898 | opacity: 1;
899 | transform: translate3d(-25px, 0, 0);
900 | }
901 | 75% {
902 | transform: translate3d(10px, 0, 0);
903 | }
904 | 90% {
905 | transform: translate3d(-5px, 0, 0);
906 | }
907 | 100% {
908 | transform: none;
909 | }
910 | }
911 | @-webkit-keyframes flyInRight {
912 | 0% {
913 | opacity: 0;
914 | transform: translate3d(-1500px, 0, 0);
915 | }
916 | 60% {
917 | opacity: 1;
918 | transform: translate3d(25px, 0, 0);
919 | }
920 | 75% {
921 | transform: translate3d(-10px, 0, 0);
922 | }
923 | 90% {
924 | transform: translate3d(5px, 0, 0);
925 | }
926 | 100% {
927 | transform: none;
928 | }
929 | }
930 | @keyframes flyInRight {
931 | 0% {
932 | opacity: 0;
933 | transform: translate3d(-1500px, 0, 0);
934 | }
935 | 60% {
936 | opacity: 1;
937 | transform: translate3d(25px, 0, 0);
938 | }
939 | 75% {
940 | transform: translate3d(-10px, 0, 0);
941 | }
942 | 90% {
943 | transform: translate3d(5px, 0, 0);
944 | }
945 | 100% {
946 | transform: none;
947 | }
948 | }
949 |
950 | /* Out */
951 | @-webkit-keyframes flyOut {
952 | 20% {
953 | transform: scale3d(0.9, 0.9, 0.9);
954 | }
955 | 50%,
956 | 55% {
957 | opacity: 1;
958 | transform: scale3d(1.1, 1.1, 1.1);
959 | }
960 | 100% {
961 | opacity: 0;
962 | transform: scale3d(0.3, 0.3, 0.3);
963 | }
964 | }
965 | @keyframes flyOut {
966 | 20% {
967 | transform: scale3d(0.9, 0.9, 0.9);
968 | }
969 | 50%,
970 | 55% {
971 | opacity: 1;
972 | transform: scale3d(1.1, 1.1, 1.1);
973 | }
974 | 100% {
975 | opacity: 0;
976 | transform: scale3d(0.3, 0.3, 0.3);
977 | }
978 | }
979 | @-webkit-keyframes flyOutUp {
980 | 20% {
981 | transform: translate3d(0, 10px, 0);
982 | }
983 | 40%,
984 | 45% {
985 | opacity: 1;
986 | transform: translate3d(0, -20px, 0);
987 | }
988 | 100% {
989 | opacity: 0;
990 | transform: translate3d(0, 2000px, 0);
991 | }
992 | }
993 | @keyframes flyOutUp {
994 | 20% {
995 | transform: translate3d(0, 10px, 0);
996 | }
997 | 40%,
998 | 45% {
999 | opacity: 1;
1000 | transform: translate3d(0, -20px, 0);
1001 | }
1002 | 100% {
1003 | opacity: 0;
1004 | transform: translate3d(0, 2000px, 0);
1005 | }
1006 | }
1007 | @-webkit-keyframes flyOutDown {
1008 | 20% {
1009 | transform: translate3d(0, -10px, 0);
1010 | }
1011 | 40%,
1012 | 45% {
1013 | opacity: 1;
1014 | transform: translate3d(0, 20px, 0);
1015 | }
1016 | 100% {
1017 | opacity: 0;
1018 | transform: translate3d(0, -2000px, 0);
1019 | }
1020 | }
1021 | @keyframes flyOutDown {
1022 | 20% {
1023 | transform: translate3d(0, -10px, 0);
1024 | }
1025 | 40%,
1026 | 45% {
1027 | opacity: 1;
1028 | transform: translate3d(0, 20px, 0);
1029 | }
1030 | 100% {
1031 | opacity: 0;
1032 | transform: translate3d(0, -2000px, 0);
1033 | }
1034 | }
1035 | @-webkit-keyframes flyOutRight {
1036 | 20% {
1037 | opacity: 1;
1038 | transform: translate3d(20px, 0, 0);
1039 | }
1040 | 100% {
1041 | opacity: 0;
1042 | transform: translate3d(-2000px, 0, 0);
1043 | }
1044 | }
1045 | @keyframes flyOutRight {
1046 | 20% {
1047 | opacity: 1;
1048 | transform: translate3d(20px, 0, 0);
1049 | }
1050 | 100% {
1051 | opacity: 0;
1052 | transform: translate3d(-2000px, 0, 0);
1053 | }
1054 | }
1055 | @-webkit-keyframes flyOutLeft {
1056 | 20% {
1057 | opacity: 1;
1058 | transform: translate3d(-20px, 0, 0);
1059 | }
1060 | 100% {
1061 | opacity: 0;
1062 | transform: translate3d(2000px, 0, 0);
1063 | }
1064 | }
1065 | @keyframes flyOutLeft {
1066 | 20% {
1067 | opacity: 1;
1068 | transform: translate3d(-20px, 0, 0);
1069 | }
1070 | 100% {
1071 | opacity: 0;
1072 | transform: translate3d(2000px, 0, 0);
1073 | }
1074 | }
1075 |
1076 | /*--------------
1077 | Slide
1078 | ---------------*/
1079 |
1080 | .transition.slide.in,
1081 | .transition[class*="slide down"].in {
1082 | -webkit-animation-name: slideInY;
1083 | animation-name: slideInY;
1084 | transform-origin: top center;
1085 | }
1086 | .transition[class*="slide up"].in {
1087 | -webkit-animation-name: slideInY;
1088 | animation-name: slideInY;
1089 | transform-origin: bottom center;
1090 | }
1091 | .transition[class*="slide left"].in {
1092 | -webkit-animation-name: slideInX;
1093 | animation-name: slideInX;
1094 | transform-origin: center right;
1095 | }
1096 | .transition[class*="slide right"].in {
1097 | -webkit-animation-name: slideInX;
1098 | animation-name: slideInX;
1099 | transform-origin: center left;
1100 | }
1101 | .transition.slide.out,
1102 | .transition[class*="slide down"].out {
1103 | -webkit-animation-name: slideOutY;
1104 | animation-name: slideOutY;
1105 | transform-origin: top center;
1106 | }
1107 | .transition[class*="slide up"].out {
1108 | -webkit-animation-name: slideOutY;
1109 | animation-name: slideOutY;
1110 | transform-origin: bottom center;
1111 | }
1112 | .transition[class*="slide left"].out {
1113 | -webkit-animation-name: slideOutX;
1114 | animation-name: slideOutX;
1115 | transform-origin: center right;
1116 | }
1117 | .transition[class*="slide right"].out {
1118 | -webkit-animation-name: slideOutX;
1119 | animation-name: slideOutX;
1120 | transform-origin: center left;
1121 | }
1122 |
1123 | /* In */
1124 | @-webkit-keyframes slideInY {
1125 | 0% {
1126 | opacity: 0;
1127 | transform: scaleY(0);
1128 | }
1129 | 100% {
1130 | opacity: 1;
1131 | transform: scaleY(1);
1132 | }
1133 | }
1134 | @keyframes slideInY {
1135 | 0% {
1136 | opacity: 0;
1137 | transform: scaleY(0);
1138 | }
1139 | 100% {
1140 | opacity: 1;
1141 | transform: scaleY(1);
1142 | }
1143 | }
1144 | @-webkit-keyframes slideInX {
1145 | 0% {
1146 | opacity: 0;
1147 | transform: scaleX(0);
1148 | }
1149 | 100% {
1150 | opacity: 1;
1151 | transform: scaleX(1);
1152 | }
1153 | }
1154 | @keyframes slideInX {
1155 | 0% {
1156 | opacity: 0;
1157 | transform: scaleX(0);
1158 | }
1159 | 100% {
1160 | opacity: 1;
1161 | transform: scaleX(1);
1162 | }
1163 | }
1164 |
1165 | /* Out */
1166 | @-webkit-keyframes slideOutY {
1167 | 0% {
1168 | opacity: 1;
1169 | transform: scaleY(1);
1170 | }
1171 | 100% {
1172 | opacity: 0;
1173 | transform: scaleY(0);
1174 | }
1175 | }
1176 | @keyframes slideOutY {
1177 | 0% {
1178 | opacity: 1;
1179 | transform: scaleY(1);
1180 | }
1181 | 100% {
1182 | opacity: 0;
1183 | transform: scaleY(0);
1184 | }
1185 | }
1186 | @-webkit-keyframes slideOutX {
1187 | 0% {
1188 | opacity: 1;
1189 | transform: scaleX(1);
1190 | }
1191 | 100% {
1192 | opacity: 0;
1193 | transform: scaleX(0);
1194 | }
1195 | }
1196 | @keyframes slideOutX {
1197 | 0% {
1198 | opacity: 1;
1199 | transform: scaleX(1);
1200 | }
1201 | 100% {
1202 | opacity: 0;
1203 | transform: scaleX(0);
1204 | }
1205 | }
1206 |
1207 | /*--------------
1208 | Swing
1209 | ---------------*/
1210 |
1211 | .transition.swing {
1212 | -webkit-animation-duration: 800ms;
1213 | animation-duration: 800ms;
1214 | }
1215 | .transition[class*="swing down"].in {
1216 | -webkit-animation-name: swingInX;
1217 | animation-name: swingInX;
1218 | transform-origin: top center;
1219 | }
1220 | .transition[class*="swing up"].in {
1221 | -webkit-animation-name: swingInX;
1222 | animation-name: swingInX;
1223 | transform-origin: bottom center;
1224 | }
1225 | .transition[class*="swing left"].in {
1226 | -webkit-animation-name: swingInY;
1227 | animation-name: swingInY;
1228 | transform-origin: center right;
1229 | }
1230 | .transition[class*="swing right"].in {
1231 | -webkit-animation-name: swingInY;
1232 | animation-name: swingInY;
1233 | transform-origin: center left;
1234 | }
1235 | .transition.swing.out,
1236 | .transition[class*="swing down"].out {
1237 | -webkit-animation-name: swingOutX;
1238 | animation-name: swingOutX;
1239 | transform-origin: top center;
1240 | }
1241 | .transition[class*="swing up"].out {
1242 | -webkit-animation-name: swingOutX;
1243 | animation-name: swingOutX;
1244 | transform-origin: bottom center;
1245 | }
1246 | .transition[class*="swing left"].out {
1247 | -webkit-animation-name: swingOutY;
1248 | animation-name: swingOutY;
1249 | transform-origin: center right;
1250 | }
1251 | .transition[class*="swing right"].out {
1252 | -webkit-animation-name: swingOutY;
1253 | animation-name: swingOutY;
1254 | transform-origin: center left;
1255 | }
1256 |
1257 | /* In */
1258 | @-webkit-keyframes swingInX {
1259 | 0% {
1260 | transform: perspective(1000px) rotateX(90deg);
1261 | opacity: 0;
1262 | }
1263 | 40% {
1264 | transform: perspective(1000px) rotateX(-30deg);
1265 | opacity: 1;
1266 | }
1267 | 60% {
1268 | transform: perspective(1000px) rotateX(15deg);
1269 | }
1270 | 80% {
1271 | transform: perspective(1000px) rotateX(-7.5deg);
1272 | }
1273 | 100% {
1274 | transform: perspective(1000px) rotateX(0deg);
1275 | }
1276 | }
1277 | @keyframes swingInX {
1278 | 0% {
1279 | transform: perspective(1000px) rotateX(90deg);
1280 | opacity: 0;
1281 | }
1282 | 40% {
1283 | transform: perspective(1000px) rotateX(-30deg);
1284 | opacity: 1;
1285 | }
1286 | 60% {
1287 | transform: perspective(1000px) rotateX(15deg);
1288 | }
1289 | 80% {
1290 | transform: perspective(1000px) rotateX(-7.5deg);
1291 | }
1292 | 100% {
1293 | transform: perspective(1000px) rotateX(0deg);
1294 | }
1295 | }
1296 | @-webkit-keyframes swingInY {
1297 | 0% {
1298 | transform: perspective(1000px) rotateY(-90deg);
1299 | opacity: 0;
1300 | }
1301 | 40% {
1302 | transform: perspective(1000px) rotateY(30deg);
1303 | opacity: 1;
1304 | }
1305 | 60% {
1306 | transform: perspective(1000px) rotateY(-17.5deg);
1307 | }
1308 | 80% {
1309 | transform: perspective(1000px) rotateY(7.5deg);
1310 | }
1311 | 100% {
1312 | transform: perspective(1000px) rotateY(0deg);
1313 | }
1314 | }
1315 | @keyframes swingInY {
1316 | 0% {
1317 | transform: perspective(1000px) rotateY(-90deg);
1318 | opacity: 0;
1319 | }
1320 | 40% {
1321 | transform: perspective(1000px) rotateY(30deg);
1322 | opacity: 1;
1323 | }
1324 | 60% {
1325 | transform: perspective(1000px) rotateY(-17.5deg);
1326 | }
1327 | 80% {
1328 | transform: perspective(1000px) rotateY(7.5deg);
1329 | }
1330 | 100% {
1331 | transform: perspective(1000px) rotateY(0deg);
1332 | }
1333 | }
1334 |
1335 | /* Out */
1336 | @-webkit-keyframes swingOutX {
1337 | 0% {
1338 | transform: perspective(1000px) rotateX(0deg);
1339 | }
1340 | 40% {
1341 | transform: perspective(1000px) rotateX(-7.5deg);
1342 | }
1343 | 60% {
1344 | transform: perspective(1000px) rotateX(17.5deg);
1345 | }
1346 | 80% {
1347 | transform: perspective(1000px) rotateX(-30deg);
1348 | opacity: 1;
1349 | }
1350 | 100% {
1351 | transform: perspective(1000px) rotateX(90deg);
1352 | opacity: 0;
1353 | }
1354 | }
1355 | @keyframes swingOutX {
1356 | 0% {
1357 | transform: perspective(1000px) rotateX(0deg);
1358 | }
1359 | 40% {
1360 | transform: perspective(1000px) rotateX(-7.5deg);
1361 | }
1362 | 60% {
1363 | transform: perspective(1000px) rotateX(17.5deg);
1364 | }
1365 | 80% {
1366 | transform: perspective(1000px) rotateX(-30deg);
1367 | opacity: 1;
1368 | }
1369 | 100% {
1370 | transform: perspective(1000px) rotateX(90deg);
1371 | opacity: 0;
1372 | }
1373 | }
1374 | @-webkit-keyframes swingOutY {
1375 | 0% {
1376 | transform: perspective(1000px) rotateY(0deg);
1377 | }
1378 | 40% {
1379 | transform: perspective(1000px) rotateY(7.5deg);
1380 | }
1381 | 60% {
1382 | transform: perspective(1000px) rotateY(-10deg);
1383 | }
1384 | 80% {
1385 | transform: perspective(1000px) rotateY(30deg);
1386 | opacity: 1;
1387 | }
1388 | 100% {
1389 | transform: perspective(1000px) rotateY(-90deg);
1390 | opacity: 0;
1391 | }
1392 | }
1393 | @keyframes swingOutY {
1394 | 0% {
1395 | transform: perspective(1000px) rotateY(0deg);
1396 | }
1397 | 40% {
1398 | transform: perspective(1000px) rotateY(7.5deg);
1399 | }
1400 | 60% {
1401 | transform: perspective(1000px) rotateY(-10deg);
1402 | }
1403 | 80% {
1404 | transform: perspective(1000px) rotateY(30deg);
1405 | opacity: 1;
1406 | }
1407 | 100% {
1408 | transform: perspective(1000px) rotateY(-90deg);
1409 | opacity: 0;
1410 | }
1411 | }
1412 |
1413 | /*--------------
1414 | Zoom
1415 | ---------------*/
1416 |
1417 | .transition.zoom.in {
1418 | -webkit-animation-name: zoomIn;
1419 | animation-name: zoomIn;
1420 | }
1421 | .transition.zoom.out {
1422 | -webkit-animation-name: zoomOut;
1423 | animation-name: zoomOut;
1424 | }
1425 | @-webkit-keyframes zoomIn {
1426 | 0% {
1427 | opacity: 1;
1428 | transform: scale(0);
1429 | }
1430 | 100% {
1431 | opacity: 1;
1432 | transform: scale(1);
1433 | }
1434 | }
1435 | @keyframes zoomIn {
1436 | 0% {
1437 | opacity: 1;
1438 | transform: scale(0);
1439 | }
1440 | 100% {
1441 | opacity: 1;
1442 | transform: scale(1);
1443 | }
1444 | }
1445 | @-webkit-keyframes zoomOut {
1446 | 0% {
1447 | opacity: 1;
1448 | transform: scale(1);
1449 | }
1450 | 100% {
1451 | opacity: 1;
1452 | transform: scale(0);
1453 | }
1454 | }
1455 | @keyframes zoomOut {
1456 | 0% {
1457 | opacity: 1;
1458 | transform: scale(1);
1459 | }
1460 | 100% {
1461 | opacity: 1;
1462 | transform: scale(0);
1463 | }
1464 | }
1465 |
1466 |
1467 | /*******************************
1468 | Static Animations
1469 | *******************************/
1470 |
1471 |
1472 | /*--------------
1473 | Emphasis
1474 | ---------------*/
1475 |
1476 | .flash.transition {
1477 | -webkit-animation-duration: 750ms;
1478 | animation-duration: 750ms;
1479 | -webkit-animation-name: flash;
1480 | animation-name: flash;
1481 | }
1482 | .shake.transition {
1483 | -webkit-animation-duration: 750ms;
1484 | animation-duration: 750ms;
1485 | -webkit-animation-name: shake;
1486 | animation-name: shake;
1487 | }
1488 | .bounce.transition {
1489 | -webkit-animation-duration: 750ms;
1490 | animation-duration: 750ms;
1491 | -webkit-animation-name: bounce;
1492 | animation-name: bounce;
1493 | }
1494 | .tada.transition {
1495 | -webkit-animation-duration: 750ms;
1496 | animation-duration: 750ms;
1497 | -webkit-animation-name: tada;
1498 | animation-name: tada;
1499 | }
1500 | .pulse.transition {
1501 | -webkit-animation-duration: 500ms;
1502 | animation-duration: 500ms;
1503 | -webkit-animation-name: pulse;
1504 | animation-name: pulse;
1505 | }
1506 | .jiggle.transition {
1507 | -webkit-animation-duration: 750ms;
1508 | animation-duration: 750ms;
1509 | -webkit-animation-name: jiggle;
1510 | animation-name: jiggle;
1511 | }
1512 | .transition.glow {
1513 | -webkit-animation-duration: 2000ms;
1514 | animation-duration: 2000ms;
1515 | -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
1516 | animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
1517 | }
1518 | .transition.glow {
1519 | -webkit-animation-name: glow;
1520 | animation-name: glow;
1521 | }
1522 |
1523 | /* Flash */
1524 | @-webkit-keyframes flash {
1525 | 0%,
1526 | 50%,
1527 | 100% {
1528 | opacity: 1;
1529 | }
1530 | 25%,
1531 | 75% {
1532 | opacity: 0;
1533 | }
1534 | }
1535 | @keyframes flash {
1536 | 0%,
1537 | 50%,
1538 | 100% {
1539 | opacity: 1;
1540 | }
1541 | 25%,
1542 | 75% {
1543 | opacity: 0;
1544 | }
1545 | }
1546 |
1547 | /* Shake */
1548 | @-webkit-keyframes shake {
1549 | 0%,
1550 | 100% {
1551 | transform: translateX(0);
1552 | }
1553 | 10%,
1554 | 30%,
1555 | 50%,
1556 | 70%,
1557 | 90% {
1558 | transform: translateX(-10px);
1559 | }
1560 | 20%,
1561 | 40%,
1562 | 60%,
1563 | 80% {
1564 | transform: translateX(10px);
1565 | }
1566 | }
1567 | @keyframes shake {
1568 | 0%,
1569 | 100% {
1570 | transform: translateX(0);
1571 | }
1572 | 10%,
1573 | 30%,
1574 | 50%,
1575 | 70%,
1576 | 90% {
1577 | transform: translateX(-10px);
1578 | }
1579 | 20%,
1580 | 40%,
1581 | 60%,
1582 | 80% {
1583 | transform: translateX(10px);
1584 | }
1585 | }
1586 |
1587 | /* Bounce */
1588 | @-webkit-keyframes bounce {
1589 | 0%,
1590 | 20%,
1591 | 50%,
1592 | 80%,
1593 | 100% {
1594 | transform: translateY(0);
1595 | }
1596 | 40% {
1597 | transform: translateY(-30px);
1598 | }
1599 | 60% {
1600 | transform: translateY(-15px);
1601 | }
1602 | }
1603 | @keyframes bounce {
1604 | 0%,
1605 | 20%,
1606 | 50%,
1607 | 80%,
1608 | 100% {
1609 | transform: translateY(0);
1610 | }
1611 | 40% {
1612 | transform: translateY(-30px);
1613 | }
1614 | 60% {
1615 | transform: translateY(-15px);
1616 | }
1617 | }
1618 |
1619 | /* Tada */
1620 | @-webkit-keyframes tada {
1621 | 0% {
1622 | transform: scale(1);
1623 | }
1624 | 10%,
1625 | 20% {
1626 | transform: scale(0.9) rotate(-3deg);
1627 | }
1628 | 30%,
1629 | 50%,
1630 | 70%,
1631 | 90% {
1632 | transform: scale(1.1) rotate(3deg);
1633 | }
1634 | 40%,
1635 | 60%,
1636 | 80% {
1637 | transform: scale(1.1) rotate(-3deg);
1638 | }
1639 | 100% {
1640 | transform: scale(1) rotate(0);
1641 | }
1642 | }
1643 | @keyframes tada {
1644 | 0% {
1645 | transform: scale(1);
1646 | }
1647 | 10%,
1648 | 20% {
1649 | transform: scale(0.9) rotate(-3deg);
1650 | }
1651 | 30%,
1652 | 50%,
1653 | 70%,
1654 | 90% {
1655 | transform: scale(1.1) rotate(3deg);
1656 | }
1657 | 40%,
1658 | 60%,
1659 | 80% {
1660 | transform: scale(1.1) rotate(-3deg);
1661 | }
1662 | 100% {
1663 | transform: scale(1) rotate(0);
1664 | }
1665 | }
1666 |
1667 | /* Pulse */
1668 | @-webkit-keyframes pulse {
1669 | 0% {
1670 | transform: scale(1);
1671 | opacity: 1;
1672 | }
1673 | 50% {
1674 | transform: scale(0.9);
1675 | opacity: 0.7;
1676 | }
1677 | 100% {
1678 | transform: scale(1);
1679 | opacity: 1;
1680 | }
1681 | }
1682 | @keyframes pulse {
1683 | 0% {
1684 | transform: scale(1);
1685 | opacity: 1;
1686 | }
1687 | 50% {
1688 | transform: scale(0.9);
1689 | opacity: 0.7;
1690 | }
1691 | 100% {
1692 | transform: scale(1);
1693 | opacity: 1;
1694 | }
1695 | }
1696 |
1697 | /* Jiggle */
1698 | @-webkit-keyframes jiggle {
1699 | 0% {
1700 | transform: scale3d(1, 1, 1);
1701 | }
1702 | 30% {
1703 | transform: scale3d(1.25, 0.75, 1);
1704 | }
1705 | 40% {
1706 | transform: scale3d(0.75, 1.25, 1);
1707 | }
1708 | 50% {
1709 | transform: scale3d(1.15, 0.85, 1);
1710 | }
1711 | 65% {
1712 | transform: scale3d(0.95, 1.05, 1);
1713 | }
1714 | 75% {
1715 | transform: scale3d(1.05, 0.95, 1);
1716 | }
1717 | 100% {
1718 | transform: scale3d(1, 1, 1);
1719 | }
1720 | }
1721 | @keyframes jiggle {
1722 | 0% {
1723 | transform: scale3d(1, 1, 1);
1724 | }
1725 | 30% {
1726 | transform: scale3d(1.25, 0.75, 1);
1727 | }
1728 | 40% {
1729 | transform: scale3d(0.75, 1.25, 1);
1730 | }
1731 | 50% {
1732 | transform: scale3d(1.15, 0.85, 1);
1733 | }
1734 | 65% {
1735 | transform: scale3d(0.95, 1.05, 1);
1736 | }
1737 | 75% {
1738 | transform: scale3d(1.05, 0.95, 1);
1739 | }
1740 | 100% {
1741 | transform: scale3d(1, 1, 1);
1742 | }
1743 | }
1744 |
1745 | /* Glow */
1746 | @-webkit-keyframes glow {
1747 | 0% {
1748 | background-color: #FCFCFD;
1749 | }
1750 | 30% {
1751 | background-color: #FFF6CD;
1752 | }
1753 | 100% {
1754 | background-color: #FCFCFD;
1755 | }
1756 | }
1757 | @keyframes glow {
1758 | 0% {
1759 | background-color: #FCFCFD;
1760 | }
1761 | 30% {
1762 | background-color: #FFF6CD;
1763 | }
1764 | 100% {
1765 | background-color: #FCFCFD;
1766 | }
1767 | }
1768 |
1769 |
1770 | /*******************************
1771 | Site Overrides
1772 | *******************************/
1773 |
1774 |
--------------------------------------------------------------------------------
/transition.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.5.0 - Transition
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */
10 |
11 | ;(function ($, window, document, undefined) {
12 |
13 | 'use strict';
14 |
15 | window = (typeof window != 'undefined' && window.Math == Math)
16 | ? window
17 | : (typeof self != 'undefined' && self.Math == Math)
18 | ? self
19 | : Function('return this')()
20 | ;
21 |
22 | $.fn.transition = function() {
23 | var
24 | $allModules = $(this),
25 | moduleSelector = $allModules.selector || '',
26 |
27 | time = new Date().getTime(),
28 | performance = [],
29 |
30 | moduleArguments = arguments,
31 | query = moduleArguments[0],
32 | queryArguments = [].slice.call(arguments, 1),
33 | methodInvoked = (typeof query === 'string'),
34 |
35 | requestAnimationFrame = window.requestAnimationFrame
36 | || window.mozRequestAnimationFrame
37 | || window.webkitRequestAnimationFrame
38 | || window.msRequestAnimationFrame
39 | || function(callback) { setTimeout(callback, 0); },
40 |
41 | returnedValue
42 | ;
43 | $allModules
44 | .each(function(index) {
45 | var
46 | $module = $(this),
47 | element = this,
48 |
49 | // set at run time
50 | settings,
51 | instance,
52 |
53 | error,
54 | className,
55 | metadata,
56 | animationEnd,
57 | animationName,
58 |
59 | namespace,
60 | moduleNamespace,
61 | eventNamespace,
62 | module
63 | ;
64 |
65 | module = {
66 |
67 | initialize: function() {
68 |
69 | // get full settings
70 | settings = module.get.settings.apply(element, moduleArguments);
71 |
72 | // shorthand
73 | className = settings.className;
74 | error = settings.error;
75 | metadata = settings.metadata;
76 |
77 | // define namespace
78 | eventNamespace = '.' + settings.namespace;
79 | moduleNamespace = 'module-' + settings.namespace;
80 | instance = $module.data(moduleNamespace) || module;
81 |
82 | // get vendor specific events
83 | animationEnd = module.get.animationEndEvent();
84 |
85 | if(methodInvoked) {
86 | methodInvoked = module.invoke(query);
87 | }
88 |
89 | // method not invoked, lets run an animation
90 | if(methodInvoked === false) {
91 | module.verbose('Converted arguments into settings object', settings);
92 | if(settings.interval) {
93 | module.delay(settings.animate);
94 | }
95 | else {
96 | module.animate();
97 | }
98 | module.instantiate();
99 | }
100 | },
101 |
102 | instantiate: function() {
103 | module.verbose('Storing instance of module', module);
104 | instance = module;
105 | $module
106 | .data(moduleNamespace, instance)
107 | ;
108 | },
109 |
110 | destroy: function() {
111 | module.verbose('Destroying previous module for', element);
112 | $module
113 | .removeData(moduleNamespace)
114 | ;
115 | },
116 |
117 | refresh: function() {
118 | module.verbose('Refreshing display type on next animation');
119 | delete module.displayType;
120 | },
121 |
122 | forceRepaint: function() {
123 | module.verbose('Forcing element repaint');
124 | var
125 | $parentElement = $module.parent(),
126 | $nextElement = $module.next()
127 | ;
128 | if($nextElement.length === 0) {
129 | $module.detach().appendTo($parentElement);
130 | }
131 | else {
132 | $module.detach().insertBefore($nextElement);
133 | }
134 | },
135 |
136 | repaint: function() {
137 | module.verbose('Repainting element');
138 | var
139 | fakeAssignment = element.offsetWidth
140 | ;
141 | },
142 |
143 | delay: function(interval) {
144 | var
145 | direction = module.get.animationDirection(),
146 | shouldReverse,
147 | delay
148 | ;
149 | if(!direction) {
150 | direction = module.can.transition()
151 | ? module.get.direction()
152 | : 'static'
153 | ;
154 | }
155 | interval = (interval !== undefined)
156 | ? interval
157 | : settings.interval
158 | ;
159 | shouldReverse = (settings.reverse == 'auto' && direction == className.outward);
160 | delay = (shouldReverse || settings.reverse == true)
161 | ? ($allModules.length - index) * settings.interval
162 | : index * settings.interval
163 | ;
164 | module.debug('Delaying animation by', delay);
165 | setTimeout(module.animate, delay);
166 | },
167 |
168 | animate: function(overrideSettings) {
169 | settings = overrideSettings || settings;
170 | if(!module.is.supported()) {
171 | module.error(error.support);
172 | return false;
173 | }
174 | module.debug('Preparing animation', settings.animation);
175 | if(module.is.animating()) {
176 | if(settings.queue) {
177 | if(!settings.allowRepeats && module.has.direction() && module.is.occurring() && module.queuing !== true) {
178 | module.debug('Animation is currently occurring, preventing queueing same animation', settings.animation);
179 | }
180 | else {
181 | module.queue(settings.animation);
182 | }
183 | return false;
184 | }
185 | else if(!settings.allowRepeats && module.is.occurring()) {
186 | module.debug('Animation is already occurring, will not execute repeated animation', settings.animation);
187 | return false;
188 | }
189 | else {
190 | module.debug('New animation started, completing previous early', settings.animation);
191 | instance.complete();
192 | }
193 | }
194 | if( module.can.animate() ) {
195 | module.set.animating(settings.animation);
196 | }
197 | else {
198 | module.error(error.noAnimation, settings.animation, element);
199 | }
200 | },
201 |
202 | reset: function() {
203 | module.debug('Resetting animation to beginning conditions');
204 | module.remove.animationCallbacks();
205 | module.restore.conditions();
206 | module.remove.animating();
207 | },
208 |
209 | queue: function(animation) {
210 | module.debug('Queueing animation of', animation);
211 | module.queuing = true;
212 | $module
213 | .one(animationEnd + '.queue' + eventNamespace, function() {
214 | module.queuing = false;
215 | module.repaint();
216 | module.animate.apply(this, settings);
217 | })
218 | ;
219 | },
220 |
221 | complete: function (event) {
222 | module.debug('Animation complete', settings.animation);
223 | module.remove.completeCallback();
224 | module.remove.failSafe();
225 | if(!module.is.looping()) {
226 | if( module.is.outward() ) {
227 | module.verbose('Animation is outward, hiding element');
228 | module.restore.conditions();
229 | module.hide();
230 | }
231 | else if( module.is.inward() ) {
232 | module.verbose('Animation is outward, showing element');
233 | module.restore.conditions();
234 | module.show();
235 | }
236 | else {
237 | module.verbose('Static animation completed');
238 | module.restore.conditions();
239 | settings.onComplete.call(element);
240 | }
241 | }
242 | },
243 |
244 | force: {
245 | visible: function() {
246 | var
247 | style = $module.attr('style'),
248 | userStyle = module.get.userStyle(),
249 | displayType = module.get.displayType(),
250 | overrideStyle = userStyle + 'display: ' + displayType + ' !important;',
251 | currentDisplay = $module.css('display'),
252 | emptyStyle = (style === undefined || style === '')
253 | ;
254 | if(currentDisplay !== displayType) {
255 | module.verbose('Overriding default display to show element', displayType);
256 | $module
257 | .attr('style', overrideStyle)
258 | ;
259 | }
260 | else if(emptyStyle) {
261 | $module.removeAttr('style');
262 | }
263 | },
264 | hidden: function() {
265 | var
266 | style = $module.attr('style'),
267 | currentDisplay = $module.css('display'),
268 | emptyStyle = (style === undefined || style === '')
269 | ;
270 | if(currentDisplay !== 'none' && !module.is.hidden()) {
271 | module.verbose('Overriding default display to hide element');
272 | $module
273 | .css('display', 'none')
274 | ;
275 | }
276 | else if(emptyStyle) {
277 | $module
278 | .removeAttr('style')
279 | ;
280 | }
281 | }
282 | },
283 |
284 | has: {
285 | direction: function(animation) {
286 | var
287 | hasDirection = false
288 | ;
289 | animation = animation || settings.animation;
290 | if(typeof animation === 'string') {
291 | animation = animation.split(' ');
292 | $.each(animation, function(index, word){
293 | if(word === className.inward || word === className.outward) {
294 | hasDirection = true;
295 | }
296 | });
297 | }
298 | return hasDirection;
299 | },
300 | inlineDisplay: function() {
301 | var
302 | style = $module.attr('style') || ''
303 | ;
304 | return $.isArray(style.match(/display.*?;/, ''));
305 | }
306 | },
307 |
308 | set: {
309 | animating: function(animation) {
310 | var
311 | animationClass,
312 | direction
313 | ;
314 | // remove previous callbacks
315 | module.remove.completeCallback();
316 |
317 | // determine exact animation
318 | animation = animation || settings.animation;
319 | animationClass = module.get.animationClass(animation);
320 |
321 | // save animation class in cache to restore class names
322 | module.save.animation(animationClass);
323 |
324 | // override display if necessary so animation appears visibly
325 | module.force.visible();
326 |
327 | module.remove.hidden();
328 | module.remove.direction();
329 |
330 | module.start.animation(animationClass);
331 |
332 | },
333 | duration: function(animationName, duration) {
334 | duration = duration || settings.duration;
335 | duration = (typeof duration == 'number')
336 | ? duration + 'ms'
337 | : duration
338 | ;
339 | if(duration || duration === 0) {
340 | module.verbose('Setting animation duration', duration);
341 | $module
342 | .css({
343 | 'animation-duration': duration
344 | })
345 | ;
346 | }
347 | },
348 | direction: function(direction) {
349 | direction = direction || module.get.direction();
350 | if(direction == className.inward) {
351 | module.set.inward();
352 | }
353 | else {
354 | module.set.outward();
355 | }
356 | },
357 | looping: function() {
358 | module.debug('Transition set to loop');
359 | $module
360 | .addClass(className.looping)
361 | ;
362 | },
363 | hidden: function() {
364 | $module
365 | .addClass(className.transition)
366 | .addClass(className.hidden)
367 | ;
368 | },
369 | inward: function() {
370 | module.debug('Setting direction to inward');
371 | $module
372 | .removeClass(className.outward)
373 | .addClass(className.inward)
374 | ;
375 | },
376 | outward: function() {
377 | module.debug('Setting direction to outward');
378 | $module
379 | .removeClass(className.inward)
380 | .addClass(className.outward)
381 | ;
382 | },
383 | visible: function() {
384 | $module
385 | .addClass(className.transition)
386 | .addClass(className.visible)
387 | ;
388 | }
389 | },
390 |
391 | start: {
392 | animation: function(animationClass) {
393 | animationClass = animationClass || module.get.animationClass();
394 | module.debug('Starting tween', animationClass);
395 | $module
396 | .addClass(animationClass)
397 | .one(animationEnd + '.complete' + eventNamespace, module.complete)
398 | ;
399 | if(settings.useFailSafe) {
400 | module.add.failSafe();
401 | }
402 | module.set.duration(settings.duration);
403 | settings.onStart.call(element);
404 | }
405 | },
406 |
407 | save: {
408 | animation: function(animation) {
409 | if(!module.cache) {
410 | module.cache = {};
411 | }
412 | module.cache.animation = animation;
413 | },
414 | displayType: function(displayType) {
415 | if(displayType !== 'none') {
416 | $module.data(metadata.displayType, displayType);
417 | }
418 | },
419 | transitionExists: function(animation, exists) {
420 | $.fn.transition.exists[animation] = exists;
421 | module.verbose('Saving existence of transition', animation, exists);
422 | }
423 | },
424 |
425 | restore: {
426 | conditions: function() {
427 | var
428 | animation = module.get.currentAnimation()
429 | ;
430 | if(animation) {
431 | $module
432 | .removeClass(animation)
433 | ;
434 | module.verbose('Removing animation class', module.cache);
435 | }
436 | module.remove.duration();
437 | }
438 | },
439 |
440 | add: {
441 | failSafe: function() {
442 | var
443 | duration = module.get.duration()
444 | ;
445 | module.timer = setTimeout(function() {
446 | $module.triggerHandler(animationEnd);
447 | }, duration + settings.failSafeDelay);
448 | module.verbose('Adding fail safe timer', module.timer);
449 | }
450 | },
451 |
452 | remove: {
453 | animating: function() {
454 | $module.removeClass(className.animating);
455 | },
456 | animationCallbacks: function() {
457 | module.remove.queueCallback();
458 | module.remove.completeCallback();
459 | },
460 | queueCallback: function() {
461 | $module.off('.queue' + eventNamespace);
462 | },
463 | completeCallback: function() {
464 | $module.off('.complete' + eventNamespace);
465 | },
466 | display: function() {
467 | $module.css('display', '');
468 | },
469 | direction: function() {
470 | $module
471 | .removeClass(className.inward)
472 | .removeClass(className.outward)
473 | ;
474 | },
475 | duration: function() {
476 | $module
477 | .css('animation-duration', '')
478 | ;
479 | },
480 | failSafe: function() {
481 | module.verbose('Removing fail safe timer', module.timer);
482 | if(module.timer) {
483 | clearTimeout(module.timer);
484 | }
485 | },
486 | hidden: function() {
487 | $module.removeClass(className.hidden);
488 | },
489 | visible: function() {
490 | $module.removeClass(className.visible);
491 | },
492 | looping: function() {
493 | module.debug('Transitions are no longer looping');
494 | if( module.is.looping() ) {
495 | module.reset();
496 | $module
497 | .removeClass(className.looping)
498 | ;
499 | }
500 | },
501 | transition: function() {
502 | $module
503 | .removeClass(className.visible)
504 | .removeClass(className.hidden)
505 | ;
506 | }
507 | },
508 | get: {
509 | settings: function(animation, duration, onComplete) {
510 | // single settings object
511 | if(typeof animation == 'object') {
512 | return $.extend(true, {}, $.fn.transition.settings, animation);
513 | }
514 | // all arguments provided
515 | else if(typeof onComplete == 'function') {
516 | return $.extend({}, $.fn.transition.settings, {
517 | animation : animation,
518 | onComplete : onComplete,
519 | duration : duration
520 | });
521 | }
522 | // only duration provided
523 | else if(typeof duration == 'string' || typeof duration == 'number') {
524 | return $.extend({}, $.fn.transition.settings, {
525 | animation : animation,
526 | duration : duration
527 | });
528 | }
529 | // duration is actually settings object
530 | else if(typeof duration == 'object') {
531 | return $.extend({}, $.fn.transition.settings, duration, {
532 | animation : animation
533 | });
534 | }
535 | // duration is actually callback
536 | else if(typeof duration == 'function') {
537 | return $.extend({}, $.fn.transition.settings, {
538 | animation : animation,
539 | onComplete : duration
540 | });
541 | }
542 | // only animation provided
543 | else {
544 | return $.extend({}, $.fn.transition.settings, {
545 | animation : animation
546 | });
547 | }
548 | },
549 | animationClass: function(animation) {
550 | var
551 | animationClass = animation || settings.animation,
552 | directionClass = (module.can.transition() && !module.has.direction())
553 | ? module.get.direction() + ' '
554 | : ''
555 | ;
556 | return className.animating + ' '
557 | + className.transition + ' '
558 | + directionClass
559 | + animationClass
560 | ;
561 | },
562 | currentAnimation: function() {
563 | return (module.cache && module.cache.animation !== undefined)
564 | ? module.cache.animation
565 | : false
566 | ;
567 | },
568 | currentDirection: function() {
569 | return module.is.inward()
570 | ? className.inward
571 | : className.outward
572 | ;
573 | },
574 | direction: function() {
575 | return module.is.hidden() || !module.is.visible()
576 | ? className.inward
577 | : className.outward
578 | ;
579 | },
580 | animationDirection: function(animation) {
581 | var
582 | direction
583 | ;
584 | animation = animation || settings.animation;
585 | if(typeof animation === 'string') {
586 | animation = animation.split(' ');
587 | // search animation name for out/in class
588 | $.each(animation, function(index, word){
589 | if(word === className.inward) {
590 | direction = className.inward;
591 | }
592 | else if(word === className.outward) {
593 | direction = className.outward;
594 | }
595 | });
596 | }
597 | // return found direction
598 | if(direction) {
599 | return direction;
600 | }
601 | return false;
602 | },
603 | duration: function(duration) {
604 | duration = duration || settings.duration;
605 | if(duration === false) {
606 | duration = $module.css('animation-duration') || 0;
607 | }
608 | return (typeof duration === 'string')
609 | ? (duration.indexOf('ms') > -1)
610 | ? parseFloat(duration)
611 | : parseFloat(duration) * 1000
612 | : duration
613 | ;
614 | },
615 | displayType: function(shouldDetermine) {
616 | shouldDetermine = (shouldDetermine !== undefined)
617 | ? shouldDetermine
618 | : true
619 | ;
620 | if(settings.displayType) {
621 | return settings.displayType;
622 | }
623 | if(shouldDetermine && $module.data(metadata.displayType) === undefined) {
624 | // create fake element to determine display state
625 | module.can.transition(true);
626 | }
627 | return $module.data(metadata.displayType);
628 | },
629 | userStyle: function(style) {
630 | style = style || $module.attr('style') || '';
631 | return style.replace(/display.*?;/, '');
632 | },
633 | transitionExists: function(animation) {
634 | return $.fn.transition.exists[animation];
635 | },
636 | animationStartEvent: function() {
637 | var
638 | element = document.createElement('div'),
639 | animations = {
640 | 'animation' :'animationstart',
641 | 'OAnimation' :'oAnimationStart',
642 | 'MozAnimation' :'mozAnimationStart',
643 | 'WebkitAnimation' :'webkitAnimationStart'
644 | },
645 | animation
646 | ;
647 | for(animation in animations){
648 | if( element.style[animation] !== undefined ){
649 | return animations[animation];
650 | }
651 | }
652 | return false;
653 | },
654 | animationEndEvent: function() {
655 | var
656 | element = document.createElement('div'),
657 | animations = {
658 | 'animation' :'animationend',
659 | 'OAnimation' :'oAnimationEnd',
660 | 'MozAnimation' :'mozAnimationEnd',
661 | 'WebkitAnimation' :'webkitAnimationEnd'
662 | },
663 | animation
664 | ;
665 | for(animation in animations){
666 | if( element.style[animation] !== undefined ){
667 | return animations[animation];
668 | }
669 | }
670 | return false;
671 | }
672 |
673 | },
674 |
675 | can: {
676 | transition: function(forced) {
677 | var
678 | animation = settings.animation,
679 | transitionExists = module.get.transitionExists(animation),
680 | displayType = module.get.displayType(false),
681 | elementClass,
682 | tagName,
683 | $clone,
684 | currentAnimation,
685 | inAnimation,
686 | directionExists
687 | ;
688 | if( transitionExists === undefined || forced) {
689 | module.verbose('Determining whether animation exists');
690 | elementClass = $module.attr('class');
691 | tagName = $module.prop('tagName');
692 |
693 | $clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module);
694 | currentAnimation = $clone
695 | .addClass(animation)
696 | .removeClass(className.inward)
697 | .removeClass(className.outward)
698 | .addClass(className.animating)
699 | .addClass(className.transition)
700 | .css('animationName')
701 | ;
702 | inAnimation = $clone
703 | .addClass(className.inward)
704 | .css('animationName')
705 | ;
706 | if(!displayType) {
707 | displayType = $clone
708 | .attr('class', elementClass)
709 | .removeAttr('style')
710 | .removeClass(className.hidden)
711 | .removeClass(className.visible)
712 | .show()
713 | .css('display')
714 | ;
715 | module.verbose('Determining final display state', displayType);
716 | module.save.displayType(displayType);
717 | }
718 |
719 | $clone.remove();
720 | if(currentAnimation != inAnimation) {
721 | module.debug('Direction exists for animation', animation);
722 | directionExists = true;
723 | }
724 | else if(currentAnimation == 'none' || !currentAnimation) {
725 | module.debug('No animation defined in css', animation);
726 | return;
727 | }
728 | else {
729 | module.debug('Static animation found', animation, displayType);
730 | directionExists = false;
731 | }
732 | module.save.transitionExists(animation, directionExists);
733 | }
734 | return (transitionExists !== undefined)
735 | ? transitionExists
736 | : directionExists
737 | ;
738 | },
739 | animate: function() {
740 | // can transition does not return a value if animation does not exist
741 | return (module.can.transition() !== undefined);
742 | }
743 | },
744 |
745 | is: {
746 | animating: function() {
747 | return $module.hasClass(className.animating);
748 | },
749 | inward: function() {
750 | return $module.hasClass(className.inward);
751 | },
752 | outward: function() {
753 | return $module.hasClass(className.outward);
754 | },
755 | looping: function() {
756 | return $module.hasClass(className.looping);
757 | },
758 | occurring: function(animation) {
759 | animation = animation || settings.animation;
760 | animation = '.' + animation.replace(' ', '.');
761 | return ( $module.filter(animation).length > 0 );
762 | },
763 | visible: function() {
764 | return $module.is(':visible');
765 | },
766 | hidden: function() {
767 | return $module.css('visibility') === 'hidden';
768 | },
769 | supported: function() {
770 | return(animationEnd !== false);
771 | }
772 | },
773 |
774 | hide: function() {
775 | module.verbose('Hiding element');
776 | if( module.is.animating() ) {
777 | module.reset();
778 | }
779 | element.blur(); // IE will trigger focus change if element is not blurred before hiding
780 | module.remove.display();
781 | module.remove.visible();
782 | module.set.hidden();
783 | module.force.hidden();
784 | settings.onHide.call(element);
785 | settings.onComplete.call(element);
786 | // module.repaint();
787 | },
788 |
789 | show: function(display) {
790 | module.verbose('Showing element', display);
791 | module.remove.hidden();
792 | module.set.visible();
793 | module.force.visible();
794 | settings.onShow.call(element);
795 | settings.onComplete.call(element);
796 | // module.repaint();
797 | },
798 |
799 | toggle: function() {
800 | if( module.is.visible() ) {
801 | module.hide();
802 | }
803 | else {
804 | module.show();
805 | }
806 | },
807 |
808 | stop: function() {
809 | module.debug('Stopping current animation');
810 | $module.triggerHandler(animationEnd);
811 | },
812 |
813 | stopAll: function() {
814 | module.debug('Stopping all animation');
815 | module.remove.queueCallback();
816 | $module.triggerHandler(animationEnd);
817 | },
818 |
819 | clear: {
820 | queue: function() {
821 | module.debug('Clearing animation queue');
822 | module.remove.queueCallback();
823 | }
824 | },
825 |
826 | enable: function() {
827 | module.verbose('Starting animation');
828 | $module.removeClass(className.disabled);
829 | },
830 |
831 | disable: function() {
832 | module.debug('Stopping animation');
833 | $module.addClass(className.disabled);
834 | },
835 |
836 | setting: function(name, value) {
837 | module.debug('Changing setting', name, value);
838 | if( $.isPlainObject(name) ) {
839 | $.extend(true, settings, name);
840 | }
841 | else if(value !== undefined) {
842 | if($.isPlainObject(settings[name])) {
843 | $.extend(true, settings[name], value);
844 | }
845 | else {
846 | settings[name] = value;
847 | }
848 | }
849 | else {
850 | return settings[name];
851 | }
852 | },
853 | internal: function(name, value) {
854 | if( $.isPlainObject(name) ) {
855 | $.extend(true, module, name);
856 | }
857 | else if(value !== undefined) {
858 | module[name] = value;
859 | }
860 | else {
861 | return module[name];
862 | }
863 | },
864 | debug: function() {
865 | if(!settings.silent && settings.debug) {
866 | if(settings.performance) {
867 | module.performance.log(arguments);
868 | }
869 | else {
870 | module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
871 | module.debug.apply(console, arguments);
872 | }
873 | }
874 | },
875 | verbose: function() {
876 | if(!settings.silent && settings.verbose && settings.debug) {
877 | if(settings.performance) {
878 | module.performance.log(arguments);
879 | }
880 | else {
881 | module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
882 | module.verbose.apply(console, arguments);
883 | }
884 | }
885 | },
886 | error: function() {
887 | if(!settings.silent) {
888 | module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
889 | module.error.apply(console, arguments);
890 | }
891 | },
892 | performance: {
893 | log: function(message) {
894 | var
895 | currentTime,
896 | executionTime,
897 | previousTime
898 | ;
899 | if(settings.performance) {
900 | currentTime = new Date().getTime();
901 | previousTime = time || currentTime;
902 | executionTime = currentTime - previousTime;
903 | time = currentTime;
904 | performance.push({
905 | 'Name' : message[0],
906 | 'Arguments' : [].slice.call(message, 1) || '',
907 | 'Element' : element,
908 | 'Execution Time' : executionTime
909 | });
910 | }
911 | clearTimeout(module.performance.timer);
912 | module.performance.timer = setTimeout(module.performance.display, 500);
913 | },
914 | display: function() {
915 | var
916 | title = settings.name + ':',
917 | totalTime = 0
918 | ;
919 | time = false;
920 | clearTimeout(module.performance.timer);
921 | $.each(performance, function(index, data) {
922 | totalTime += data['Execution Time'];
923 | });
924 | title += ' ' + totalTime + 'ms';
925 | if(moduleSelector) {
926 | title += ' \'' + moduleSelector + '\'';
927 | }
928 | if($allModules.length > 1) {
929 | title += ' ' + '(' + $allModules.length + ')';
930 | }
931 | if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
932 | console.groupCollapsed(title);
933 | if(console.table) {
934 | console.table(performance);
935 | }
936 | else {
937 | $.each(performance, function(index, data) {
938 | console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
939 | });
940 | }
941 | console.groupEnd();
942 | }
943 | performance = [];
944 | }
945 | },
946 | // modified for transition to return invoke success
947 | invoke: function(query, passedArguments, context) {
948 | var
949 | object = instance,
950 | maxDepth,
951 | found,
952 | response
953 | ;
954 | passedArguments = passedArguments || queryArguments;
955 | context = element || context;
956 | if(typeof query == 'string' && object !== undefined) {
957 | query = query.split(/[\. ]/);
958 | maxDepth = query.length - 1;
959 | $.each(query, function(depth, value) {
960 | var camelCaseValue = (depth != maxDepth)
961 | ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
962 | : query
963 | ;
964 | if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
965 | object = object[camelCaseValue];
966 | }
967 | else if( object[camelCaseValue] !== undefined ) {
968 | found = object[camelCaseValue];
969 | return false;
970 | }
971 | else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
972 | object = object[value];
973 | }
974 | else if( object[value] !== undefined ) {
975 | found = object[value];
976 | return false;
977 | }
978 | else {
979 | return false;
980 | }
981 | });
982 | }
983 | if ( $.isFunction( found ) ) {
984 | response = found.apply(context, passedArguments);
985 | }
986 | else if(found !== undefined) {
987 | response = found;
988 | }
989 |
990 | if($.isArray(returnedValue)) {
991 | returnedValue.push(response);
992 | }
993 | else if(returnedValue !== undefined) {
994 | returnedValue = [returnedValue, response];
995 | }
996 | else if(response !== undefined) {
997 | returnedValue = response;
998 | }
999 | return (found !== undefined)
1000 | ? found
1001 | : false
1002 | ;
1003 | }
1004 | };
1005 | module.initialize();
1006 | })
1007 | ;
1008 | return (returnedValue !== undefined)
1009 | ? returnedValue
1010 | : this
1011 | ;
1012 | };
1013 |
1014 | // Records if CSS transition is available
1015 | $.fn.transition.exists = {};
1016 |
1017 | $.fn.transition.settings = {
1018 |
1019 | // module info
1020 | name : 'Transition',
1021 |
1022 | // hide all output from this component regardless of other settings
1023 | silent : false,
1024 |
1025 | // debug content outputted to console
1026 | debug : false,
1027 |
1028 | // verbose debug output
1029 | verbose : false,
1030 |
1031 | // performance data output
1032 | performance : true,
1033 |
1034 | // event namespace
1035 | namespace : 'transition',
1036 |
1037 | // delay between animations in group
1038 | interval : 0,
1039 |
1040 | // whether group animations should be reversed
1041 | reverse : 'auto',
1042 |
1043 | // animation callback event
1044 | onStart : function() {},
1045 | onComplete : function() {},
1046 | onShow : function() {},
1047 | onHide : function() {},
1048 |
1049 | // whether timeout should be used to ensure callback fires in cases animationend does not
1050 | useFailSafe : true,
1051 |
1052 | // delay in ms for fail safe
1053 | failSafeDelay : 100,
1054 |
1055 | // whether EXACT animation can occur twice in a row
1056 | allowRepeats : false,
1057 |
1058 | // Override final display type on visible
1059 | displayType : false,
1060 |
1061 | // animation duration
1062 | animation : 'fade',
1063 | duration : false,
1064 |
1065 | // new animations will occur after previous ones
1066 | queue : true,
1067 |
1068 | metadata : {
1069 | displayType: 'display'
1070 | },
1071 |
1072 | className : {
1073 | animating : 'animating',
1074 | disabled : 'disabled',
1075 | hidden : 'hidden',
1076 | inward : 'in',
1077 | loading : 'loading',
1078 | looping : 'looping',
1079 | outward : 'out',
1080 | transition : 'transition',
1081 | visible : 'visible'
1082 | },
1083 |
1084 | // possible errors
1085 | error: {
1086 | noAnimation : 'Element is no longer attached to DOM. Unable to animate. Use silent setting to surpress this warning in production.',
1087 | repeated : 'That animation is already occurring, cancelling repeated animation',
1088 | method : 'The method you called is not defined',
1089 | support : 'This browser does not support CSS animations'
1090 | }
1091 |
1092 | };
1093 |
1094 |
1095 | })( jQuery, window, document );
1096 |
--------------------------------------------------------------------------------
/transition.min.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * # Semantic UI 2.5.0 - Transition
3 | * http://github.com/semantic-org/semantic-ui/
4 | *
5 | *
6 | * Released under the MIT license
7 | * http://opensource.org/licenses/MIT
8 | *
9 | */.transition{-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animating.transition{-webkit-backface-visibility:hidden;backface-visibility:hidden;visibility:visible!important}.loading.transition{position:absolute;top:-99999px;left:-99999px}.hidden.transition{display:none;visibility:hidden}.visible.transition{display:block!important;visibility:visible!important}.disabled.transition{-webkit-animation-play-state:paused;animation-play-state:paused}.looping.transition{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.transition.browse{-webkit-animation-duration:.5s;animation-duration:.5s}.transition.browse.in{-webkit-animation-name:browseIn;animation-name:browseIn}.transition.browse.left.out,.transition.browse.out{-webkit-animation-name:browseOutLeft;animation-name:browseOutLeft}.transition.browse.right.out{-webkit-animation-name:browseOutRight;animation-name:browseOutRight}@-webkit-keyframes browseIn{0%{transform:scale(.8) translateZ(0);z-index:-1}10%{transform:scale(.8) translateZ(0);z-index:-1;opacity:.7}80%{transform:scale(1.05) translateZ(0);opacity:1;z-index:999}100%{transform:scale(1) translateZ(0);z-index:999}}@keyframes browseIn{0%{transform:scale(.8) translateZ(0);z-index:-1}10%{transform:scale(.8) translateZ(0);z-index:-1;opacity:.7}80%{transform:scale(1.05) translateZ(0);opacity:1;z-index:999}100%{transform:scale(1) translateZ(0);z-index:999}}@-webkit-keyframes browseOutLeft{0%{z-index:999;transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:-1;transform:translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:-1;transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}@keyframes browseOutLeft{0%{z-index:999;transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:-1;transform:translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:-1;transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}@-webkit-keyframes browseOutRight{0%{z-index:999;transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:1;transform:translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:1;transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}@keyframes browseOutRight{0%{z-index:999;transform:translateX(0) rotateY(0) rotateX(0)}50%{z-index:1;transform:translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)}80%{opacity:1}100%{z-index:1;transform:translateX(0) rotateY(0) rotateX(0) translateZ(-10px);opacity:0}}.drop.transition{transform-origin:top center;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-timing-function:cubic-bezier(.34,1.61,.7,1);animation-timing-function:cubic-bezier(.34,1.61,.7,1)}.drop.transition.in{-webkit-animation-name:dropIn;animation-name:dropIn}.drop.transition.out{-webkit-animation-name:dropOut;animation-name:dropOut}@-webkit-keyframes dropIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}@keyframes dropIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}@-webkit-keyframes dropOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0)}}@keyframes dropOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0)}}.transition.fade.in{-webkit-animation-name:fadeIn;animation-name:fadeIn}.transition[class*="fade up"].in{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}.transition[class*="fade down"].in{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}.transition[class*="fade left"].in{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}.transition[class*="fade right"].in{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}.transition.fade.out{-webkit-animation-name:fadeOut;animation-name:fadeOut}.transition[class*="fade up"].out{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}.transition[class*="fade down"].out{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}.transition[class*="fade left"].out{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}.transition[class*="fade right"].out{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes fadeInUp{0%{opacity:0;transform:translateY(10%)}100%{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10%)}100%{opacity:1;transform:translateY(0)}}@-webkit-keyframes fadeInDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;transform:translateX(10%)}100%{opacity:1;transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(10%)}100%{opacity:1;transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;transform:translateX(-10%)}100%{opacity:1;transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(-10%)}100%{opacity:1;transform:translateX(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes fadeOutUp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(5%)}}@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(5%)}}@-webkit-keyframes fadeOutDown{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-5%)}}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-5%)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(5%)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(5%)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-5%)}}@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-5%)}}.flip.transition.in,.flip.transition.out{-webkit-animation-duration:.6s;animation-duration:.6s}.horizontal.flip.transition.in{-webkit-animation-name:horizontalFlipIn;animation-name:horizontalFlipIn}.horizontal.flip.transition.out{-webkit-animation-name:horizontalFlipOut;animation-name:horizontalFlipOut}.vertical.flip.transition.in{-webkit-animation-name:verticalFlipIn;animation-name:verticalFlipIn}.vertical.flip.transition.out{-webkit-animation-name:verticalFlipOut;animation-name:verticalFlipOut}@-webkit-keyframes horizontalFlipIn{0%{transform:perspective(2000px) rotateY(-90deg);opacity:0}100%{transform:perspective(2000px) rotateY(0);opacity:1}}@keyframes horizontalFlipIn{0%{transform:perspective(2000px) rotateY(-90deg);opacity:0}100%{transform:perspective(2000px) rotateY(0);opacity:1}}@-webkit-keyframes verticalFlipIn{0%{transform:perspective(2000px) rotateX(-90deg);opacity:0}100%{transform:perspective(2000px) rotateX(0);opacity:1}}@keyframes verticalFlipIn{0%{transform:perspective(2000px) rotateX(-90deg);opacity:0}100%{transform:perspective(2000px) rotateX(0);opacity:1}}@-webkit-keyframes horizontalFlipOut{0%{transform:perspective(2000px) rotateY(0);opacity:1}100%{transform:perspective(2000px) rotateY(90deg);opacity:0}}@keyframes horizontalFlipOut{0%{transform:perspective(2000px) rotateY(0);opacity:1}100%{transform:perspective(2000px) rotateY(90deg);opacity:0}}@-webkit-keyframes verticalFlipOut{0%{transform:perspective(2000px) rotateX(0);opacity:1}100%{transform:perspective(2000px) rotateX(-90deg);opacity:0}}@keyframes verticalFlipOut{0%{transform:perspective(2000px) rotateX(0);opacity:1}100%{transform:perspective(2000px) rotateX(-90deg);opacity:0}}.scale.transition.in{-webkit-animation-name:scaleIn;animation-name:scaleIn}.scale.transition.out{-webkit-animation-name:scaleOut;animation-name:scaleOut}@-webkit-keyframes scaleIn{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@-webkit-keyframes scaleOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}.transition.fly{-webkit-animation-duration:.6s;animation-duration:.6s;transition-timing-function:cubic-bezier(.215,.61,.355,1)}.transition.fly.in{-webkit-animation-name:flyIn;animation-name:flyIn}.transition[class*="fly up"].in{-webkit-animation-name:flyInUp;animation-name:flyInUp}.transition[class*="fly down"].in{-webkit-animation-name:flyInDown;animation-name:flyInDown}.transition[class*="fly left"].in{-webkit-animation-name:flyInLeft;animation-name:flyInLeft}.transition[class*="fly right"].in{-webkit-animation-name:flyInRight;animation-name:flyInRight}.transition.fly.out{-webkit-animation-name:flyOut;animation-name:flyOut}.transition[class*="fly up"].out{-webkit-animation-name:flyOutUp;animation-name:flyOutUp}.transition[class*="fly down"].out{-webkit-animation-name:flyOutDown;animation-name:flyOutDown}.transition[class*="fly left"].out{-webkit-animation-name:flyOutLeft;animation-name:flyOutLeft}.transition[class*="fly right"].out{-webkit-animation-name:flyOutRight;animation-name:flyOutRight}@-webkit-keyframes flyIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}100%{opacity:1;transform:scale3d(1,1,1)}}@keyframes flyIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}100%{opacity:1;transform:scale3d(1,1,1)}}@-webkit-keyframes flyInUp{0%{opacity:0;transform:translate3d(0,1500px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}100%{transform:translate3d(0,0,0)}}@keyframes flyInUp{0%{opacity:0;transform:translate3d(0,1500px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}100%{transform:translate3d(0,0,0)}}@-webkit-keyframes flyInDown{0%{opacity:0;transform:translate3d(0,-1500px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}100%{transform:none}}@keyframes flyInDown{0%{opacity:0;transform:translate3d(0,-1500px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}100%{transform:none}}@-webkit-keyframes flyInLeft{0%{opacity:0;transform:translate3d(1500px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}100%{transform:none}}@keyframes flyInLeft{0%{opacity:0;transform:translate3d(1500px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}100%{transform:none}}@-webkit-keyframes flyInRight{0%{opacity:0;transform:translate3d(-1500px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}100%{transform:none}}@keyframes flyInRight{0%{opacity:0;transform:translate3d(-1500px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}100%{transform:none}}@-webkit-keyframes flyOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;transform:scale3d(.3,.3,.3)}}@keyframes flyOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;transform:scale3d(.3,.3,.3)}}@-webkit-keyframes flyOutUp{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}100%{opacity:0;transform:translate3d(0,2000px,0)}}@keyframes flyOutUp{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}100%{opacity:0;transform:translate3d(0,2000px,0)}}@-webkit-keyframes flyOutDown{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}100%{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes flyOutDown{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}100%{opacity:0;transform:translate3d(0,-2000px,0)}}@-webkit-keyframes flyOutRight{20%{opacity:1;transform:translate3d(20px,0,0)}100%{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes flyOutRight{20%{opacity:1;transform:translate3d(20px,0,0)}100%{opacity:0;transform:translate3d(-2000px,0,0)}}@-webkit-keyframes flyOutLeft{20%{opacity:1;transform:translate3d(-20px,0,0)}100%{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes flyOutLeft{20%{opacity:1;transform:translate3d(-20px,0,0)}100%{opacity:0;transform:translate3d(2000px,0,0)}}.transition.slide.in,.transition[class*="slide down"].in{-webkit-animation-name:slideInY;animation-name:slideInY;transform-origin:top center}.transition[class*="slide up"].in{-webkit-animation-name:slideInY;animation-name:slideInY;transform-origin:bottom center}.transition[class*="slide left"].in{-webkit-animation-name:slideInX;animation-name:slideInX;transform-origin:center right}.transition[class*="slide right"].in{-webkit-animation-name:slideInX;animation-name:slideInX;transform-origin:center left}.transition.slide.out,.transition[class*="slide down"].out{-webkit-animation-name:slideOutY;animation-name:slideOutY;transform-origin:top center}.transition[class*="slide up"].out{-webkit-animation-name:slideOutY;animation-name:slideOutY;transform-origin:bottom center}.transition[class*="slide left"].out{-webkit-animation-name:slideOutX;animation-name:slideOutX;transform-origin:center right}.transition[class*="slide right"].out{-webkit-animation-name:slideOutX;animation-name:slideOutX;transform-origin:center left}@-webkit-keyframes slideInY{0%{opacity:0;transform:scaleY(0)}100%{opacity:1;transform:scaleY(1)}}@keyframes slideInY{0%{opacity:0;transform:scaleY(0)}100%{opacity:1;transform:scaleY(1)}}@-webkit-keyframes slideInX{0%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}@keyframes slideInX{0%{opacity:0;transform:scaleX(0)}100%{opacity:1;transform:scaleX(1)}}@-webkit-keyframes slideOutY{0%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(0)}}@keyframes slideOutY{0%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(0)}}@-webkit-keyframes slideOutX{0%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(0)}}@keyframes slideOutX{0%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(0)}}.transition.swing{-webkit-animation-duration:.8s;animation-duration:.8s}.transition[class*="swing down"].in{-webkit-animation-name:swingInX;animation-name:swingInX;transform-origin:top center}.transition[class*="swing up"].in{-webkit-animation-name:swingInX;animation-name:swingInX;transform-origin:bottom center}.transition[class*="swing left"].in{-webkit-animation-name:swingInY;animation-name:swingInY;transform-origin:center right}.transition[class*="swing right"].in{-webkit-animation-name:swingInY;animation-name:swingInY;transform-origin:center left}.transition.swing.out,.transition[class*="swing down"].out{-webkit-animation-name:swingOutX;animation-name:swingOutX;transform-origin:top center}.transition[class*="swing up"].out{-webkit-animation-name:swingOutX;animation-name:swingOutX;transform-origin:bottom center}.transition[class*="swing left"].out{-webkit-animation-name:swingOutY;animation-name:swingOutY;transform-origin:center right}.transition[class*="swing right"].out{-webkit-animation-name:swingOutY;animation-name:swingOutY;transform-origin:center left}@-webkit-keyframes swingInX{0%{transform:perspective(1000px) rotateX(90deg);opacity:0}40%{transform:perspective(1000px) rotateX(-30deg);opacity:1}60%{transform:perspective(1000px) rotateX(15deg)}80%{transform:perspective(1000px) rotateX(-7.5deg)}100%{transform:perspective(1000px) rotateX(0)}}@keyframes swingInX{0%{transform:perspective(1000px) rotateX(90deg);opacity:0}40%{transform:perspective(1000px) rotateX(-30deg);opacity:1}60%{transform:perspective(1000px) rotateX(15deg)}80%{transform:perspective(1000px) rotateX(-7.5deg)}100%{transform:perspective(1000px) rotateX(0)}}@-webkit-keyframes swingInY{0%{transform:perspective(1000px) rotateY(-90deg);opacity:0}40%{transform:perspective(1000px) rotateY(30deg);opacity:1}60%{transform:perspective(1000px) rotateY(-17.5deg)}80%{transform:perspective(1000px) rotateY(7.5deg)}100%{transform:perspective(1000px) rotateY(0)}}@keyframes swingInY{0%{transform:perspective(1000px) rotateY(-90deg);opacity:0}40%{transform:perspective(1000px) rotateY(30deg);opacity:1}60%{transform:perspective(1000px) rotateY(-17.5deg)}80%{transform:perspective(1000px) rotateY(7.5deg)}100%{transform:perspective(1000px) rotateY(0)}}@-webkit-keyframes swingOutX{0%{transform:perspective(1000px) rotateX(0)}40%{transform:perspective(1000px) rotateX(-7.5deg)}60%{transform:perspective(1000px) rotateX(17.5deg)}80%{transform:perspective(1000px) rotateX(-30deg);opacity:1}100%{transform:perspective(1000px) rotateX(90deg);opacity:0}}@keyframes swingOutX{0%{transform:perspective(1000px) rotateX(0)}40%{transform:perspective(1000px) rotateX(-7.5deg)}60%{transform:perspective(1000px) rotateX(17.5deg)}80%{transform:perspective(1000px) rotateX(-30deg);opacity:1}100%{transform:perspective(1000px) rotateX(90deg);opacity:0}}@-webkit-keyframes swingOutY{0%{transform:perspective(1000px) rotateY(0)}40%{transform:perspective(1000px) rotateY(7.5deg)}60%{transform:perspective(1000px) rotateY(-10deg)}80%{transform:perspective(1000px) rotateY(30deg);opacity:1}100%{transform:perspective(1000px) rotateY(-90deg);opacity:0}}@keyframes swingOutY{0%{transform:perspective(1000px) rotateY(0)}40%{transform:perspective(1000px) rotateY(7.5deg)}60%{transform:perspective(1000px) rotateY(-10deg)}80%{transform:perspective(1000px) rotateY(30deg);opacity:1}100%{transform:perspective(1000px) rotateY(-90deg);opacity:0}}.transition.zoom.in{-webkit-animation-name:zoomIn;animation-name:zoomIn}.transition.zoom.out{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomIn{0%{opacity:1;transform:scale(0)}100%{opacity:1;transform:scale(1)}}@keyframes zoomIn{0%{opacity:1;transform:scale(0)}100%{opacity:1;transform:scale(1)}}@-webkit-keyframes zoomOut{0%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(0)}}@keyframes zoomOut{0%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(0)}}.flash.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:flash;animation-name:flash}.shake.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:shake;animation-name:shake}.bounce.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:bounce;animation-name:bounce}.tada.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:tada;animation-name:tada}.pulse.transition{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-name:pulse;animation-name:pulse}.jiggle.transition{-webkit-animation-duration:750ms;animation-duration:750ms;-webkit-animation-name:jiggle;animation-name:jiggle}.transition.glow{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-timing-function:cubic-bezier(.19,1,.22,1);animation-timing-function:cubic-bezier(.19,1,.22,1)}.transition.glow{-webkit-animation-name:glow;animation-name:glow}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@-webkit-keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}@-webkit-keyframes bounce{0%,100%,20%,50%,80%{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)}}@keyframes bounce{0%,100%,20%,50%,80%{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)}}@-webkit-keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}@-webkit-keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(.9);opacity:.7}100%{transform:scale(1);opacity:1}}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(.9);opacity:.7}100%{transform:scale(1);opacity:1}}@-webkit-keyframes jiggle{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}}@keyframes jiggle{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}}@-webkit-keyframes glow{0%{background-color:#fcfcfd}30%{background-color:#fff6cd}100%{background-color:#fcfcfd}}@keyframes glow{0%{background-color:#fcfcfd}30%{background-color:#fff6cd}100%{background-color:#fcfcfd}}
--------------------------------------------------------------------------------
/transition.min.js:
--------------------------------------------------------------------------------
1 | !function(C,n,A,S){"use strict";n=void 0!==n&&n.Math==Math?n:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")(),C.fn.transition=function(){var u,r=C(this),p=r.selector||"",g=(new Date).getTime(),v=[],b=arguments,y=b[0],h=[].slice.call(arguments,1),w="string"==typeof y;n.requestAnimationFrame||n.mozRequestAnimationFrame||n.webkitRequestAnimationFrame||n.msRequestAnimationFrame;return r.each(function(t){var d,s,e,c,i,a,n,o,m=C(this),l=this,f={initialize:function(){d=f.get.settings.apply(l,b),c=d.className,e=d.error,i=d.metadata,o="."+d.namespace,n="module-"+d.namespace,s=m.data(n)||f,a=f.get.animationEndEvent(),!1===(w=w&&f.invoke(y))&&(f.verbose("Converted arguments into settings object",d),d.interval?f.delay(d.animate):f.animate(),f.instantiate())},instantiate:function(){f.verbose("Storing instance of module",f),s=f,m.data(n,s)},destroy:function(){f.verbose("Destroying previous module for",l),m.removeData(n)},refresh:function(){f.verbose("Refreshing display type on next animation"),delete f.displayType},forceRepaint:function(){f.verbose("Forcing element repaint");var n=m.parent(),e=m.next();0===e.length?m.detach().appendTo(n):m.detach().insertBefore(e)},repaint:function(){f.verbose("Repainting element");l.offsetWidth},delay:function(n){var e,i=(i=f.get.animationDirection())||(f.can.transition()?f.get.direction():"static");n=n!==S?n:d.interval,e="auto"==d.reverse&&i==c.outward||1==d.reverse?(r.length-t)*d.interval:t*d.interval,f.debug("Delaying animation by",e),setTimeout(f.animate,e)},animate:function(n){if(d=n||d,!f.is.supported())return f.error(e.support),!1;if(f.debug("Preparing animation",d.animation),f.is.animating()){if(d.queue)return!d.allowRepeats&&f.has.direction()&&f.is.occurring()&&!0!==f.queuing?f.debug("Animation is currently occurring, preventing queueing same animation",d.animation):f.queue(d.animation),!1;if(!d.allowRepeats&&f.is.occurring())return f.debug("Animation is already occurring, will not execute repeated animation",d.animation),!1;f.debug("New animation started, completing previous early",d.animation),s.complete()}f.can.animate()?f.set.animating(d.animation):f.error(e.noAnimation,d.animation,l)},reset:function(){f.debug("Resetting animation to beginning conditions"),f.remove.animationCallbacks(),f.restore.conditions(),f.remove.animating()},queue:function(n){f.debug("Queueing animation of",n),f.queuing=!0,m.one(a+".queue"+o,function(){f.queuing=!1,f.repaint(),f.animate.apply(this,d)})},complete:function(n){f.debug("Animation complete",d.animation),f.remove.completeCallback(),f.remove.failSafe(),f.is.looping()||(f.is.outward()?(f.verbose("Animation is outward, hiding element"),f.restore.conditions(),f.hide()):f.is.inward()?(f.verbose("Animation is outward, showing element"),f.restore.conditions(),f.show()):(f.verbose("Static animation completed"),f.restore.conditions(),d.onComplete.call(l)))},force:{visible:function(){var n=m.attr("style"),e=f.get.userStyle(),i=f.get.displayType(),t=e+"display: "+i+" !important;",a=m.css("display"),o=n===S||""===n;a!==i?(f.verbose("Overriding default display to show element",i),m.attr("style",t)):o&&m.removeAttr("style")},hidden:function(){var n=m.attr("style"),e=m.css("display"),i=n===S||""===n;"none"===e||f.is.hidden()?i&&m.removeAttr("style"):(f.verbose("Overriding default display to hide element"),m.css("display","none"))}},has:{direction:function(n){var i=!1;return"string"==typeof(n=n||d.animation)&&(n=n.split(" "),C.each(n,function(n,e){e!==c.inward&&e!==c.outward||(i=!0)})),i},inlineDisplay:function(){var n=m.attr("style")||"";return C.isArray(n.match(/display.*?;/,""))}},set:{animating:function(n){var e;f.remove.completeCallback(),n=n||d.animation,e=f.get.animationClass(n),f.save.animation(e),f.force.visible(),f.remove.hidden(),f.remove.direction(),f.start.animation(e)},duration:function(n,e){!(e="number"==typeof(e=e||d.duration)?e+"ms":e)&&0!==e||(f.verbose("Setting animation duration",e),m.css({"animation-duration":e}))},direction:function(n){(n=n||f.get.direction())==c.inward?f.set.inward():f.set.outward()},looping:function(){f.debug("Transition set to loop"),m.addClass(c.looping)},hidden:function(){m.addClass(c.transition).addClass(c.hidden)},inward:function(){f.debug("Setting direction to inward"),m.removeClass(c.outward).addClass(c.inward)},outward:function(){f.debug("Setting direction to outward"),m.removeClass(c.inward).addClass(c.outward)},visible:function(){m.addClass(c.transition).addClass(c.visible)}},start:{animation:function(n){n=n||f.get.animationClass(),f.debug("Starting tween",n),m.addClass(n).one(a+".complete"+o,f.complete),d.useFailSafe&&f.add.failSafe(),f.set.duration(d.duration),d.onStart.call(l)}},save:{animation:function(n){f.cache||(f.cache={}),f.cache.animation=n},displayType:function(n){"none"!==n&&m.data(i.displayType,n)},transitionExists:function(n,e){C.fn.transition.exists[n]=e,f.verbose("Saving existence of transition",n,e)}},restore:{conditions:function(){var n=f.get.currentAnimation();n&&(m.removeClass(n),f.verbose("Removing animation class",f.cache)),f.remove.duration()}},add:{failSafe:function(){var n=f.get.duration();f.timer=setTimeout(function(){m.triggerHandler(a)},n+d.failSafeDelay),f.verbose("Adding fail safe timer",f.timer)}},remove:{animating:function(){m.removeClass(c.animating)},animationCallbacks:function(){f.remove.queueCallback(),f.remove.completeCallback()},queueCallback:function(){m.off(".queue"+o)},completeCallback:function(){m.off(".complete"+o)},display:function(){m.css("display","")},direction:function(){m.removeClass(c.inward).removeClass(c.outward)},duration:function(){m.css("animation-duration","")},failSafe:function(){f.verbose("Removing fail safe timer",f.timer),f.timer&&clearTimeout(f.timer)},hidden:function(){m.removeClass(c.hidden)},visible:function(){m.removeClass(c.visible)},looping:function(){f.debug("Transitions are no longer looping"),f.is.looping()&&(f.reset(),m.removeClass(c.looping))},transition:function(){m.removeClass(c.visible).removeClass(c.hidden)}},get:{settings:function(n,e,i){return"object"==typeof n?C.extend(!0,{},C.fn.transition.settings,n):"function"==typeof i?C.extend({},C.fn.transition.settings,{animation:n,onComplete:i,duration:e}):"string"==typeof e||"number"==typeof e?C.extend({},C.fn.transition.settings,{animation:n,duration:e}):"object"==typeof e?C.extend({},C.fn.transition.settings,e,{animation:n}):"function"==typeof e?C.extend({},C.fn.transition.settings,{animation:n,onComplete:e}):C.extend({},C.fn.transition.settings,{animation:n})},animationClass:function(n){var e=n||d.animation,i=f.can.transition()&&!f.has.direction()?f.get.direction()+" ":"";return c.animating+" "+c.transition+" "+i+e},currentAnimation:function(){return!(!f.cache||f.cache.animation===S)&&f.cache.animation},currentDirection:function(){return f.is.inward()?c.inward:c.outward},direction:function(){return f.is.hidden()||!f.is.visible()?c.inward:c.outward},animationDirection:function(n){var i;return"string"==typeof(n=n||d.animation)&&(n=n.split(" "),C.each(n,function(n,e){e===c.inward?i=c.inward:e===c.outward&&(i=c.outward)})),i||!1},duration:function(n){return!1===(n=n||d.duration)&&(n=m.css("animation-duration")||0),"string"==typeof n?-1").addClass(e).insertAfter(m)).addClass(s).removeClass(c.inward).removeClass(c.outward).addClass(c.animating).addClass(c.transition).css("animationName"),o=t.addClass(c.inward).css("animationName"),u||(u=t.attr("class",e).removeAttr("style").removeClass(c.hidden).removeClass(c.visible).show().css("display"),f.verbose("Determining final display state",u),f.save.displayType(u)),t.remove(),a!=o)f.debug("Direction exists for animation",s),r=!0;else{if("none"==a||!a)return void f.debug("No animation defined in css",s);f.debug("Static animation found",s,u),r=!1}f.save.transitionExists(s,r)}return l!==S?l:r},animate:function(){return f.can.transition()!==S}},is:{animating:function(){return m.hasClass(c.animating)},inward:function(){return m.hasClass(c.inward)},outward:function(){return m.hasClass(c.outward)},looping:function(){return m.hasClass(c.looping)},occurring:function(n){return n="."+(n=n||d.animation).replace(" ","."),0