sp-codes.de/bower_components/foundation-sites/dist/plugins/foundation.util.motion.js

97 lines
2.5 KiB
JavaScript
Raw Normal View History

2016-10-28 17:33:25 +00:00
'use strict';
!function ($) {
/**
* Motion module.
* @module foundation.motion
*/
var initClasses = ['mui-enter', 'mui-leave'];
var activeClasses = ['mui-enter-active', 'mui-leave-active'];
var Motion = {
animateIn: function (element, animation, cb) {
animate(true, element, animation, cb);
},
animateOut: function (element, animation, cb) {
animate(false, element, animation, cb);
}
};
function Move(duration, elem, fn) {
var anim,
prog,
start = null;
// console.log('called');
function move(ts) {
if (!start) start = window.performance.now();
// console.log(start, ts);
prog = ts - start;
fn.apply(elem);
if (prog < duration) {
anim = window.requestAnimationFrame(move, elem);
} else {
window.cancelAnimationFrame(anim);
elem.trigger('finished.zf.animate', [elem]).triggerHandler('finished.zf.animate', [elem]);
}
}
anim = window.requestAnimationFrame(move);
}
/**
* Animates an element in or out using a CSS transition class.
* @function
* @private
* @param {Boolean} isIn - Defines if the animation is in or out.
* @param {Object} element - jQuery or HTML object to animate.
* @param {String} animation - CSS class to use.
* @param {Function} cb - Callback to run when animation is finished.
*/
function animate(isIn, element, animation, cb) {
element = $(element).eq(0);
if (!element.length) return;
var initClass = isIn ? initClasses[0] : initClasses[1];
var activeClass = isIn ? activeClasses[0] : activeClasses[1];
// Set up the animation
reset();
element.addClass(animation).css('transition', 'none');
requestAnimationFrame(function () {
element.addClass(initClass);
if (isIn) element.show();
});
// Start the animation
requestAnimationFrame(function () {
element[0].offsetWidth;
element.css('transition', '').addClass(activeClass);
});
// Clean up the animation when it finishes
element.one(Foundation.transitionend(element), finish);
// Hides the element (for out animations), resets the element, and runs a callback
function finish() {
if (!isIn) element.hide();
reset();
if (cb) cb.apply(element);
}
// Resets transitions and removes motion-specific classes
function reset() {
element[0].style.transitionDuration = 0;
element.removeClass(initClass + ' ' + activeClass + ' ' + animation);
}
}
Foundation.Move = Move;
Foundation.Motion = Motion;
}(jQuery);