97 lines
2.5 KiB
JavaScript
97 lines
2.5 KiB
JavaScript
'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); |