react-component-transition
Version:
Easy animations between react component transitions.
200 lines (199 loc) • 8.09 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.cancelAnimation = exports.isAnimationRunning = exports.finishAnimation = exports.animateExit = exports.animateEnter = exports.animateContainer = void 0;
var tslib_1 = require("tslib");
var types_1 = require("../types");
var defaults_1 = require("../animations/defaults");
// Limit (in pixels) when under animation duration will
// be adjusted to avoid having full animation duration
// in a short pixels distance.
var animationDurationThreshold = 100;
var animateContainer = function (element, prevClientRect, nextClientRect, duration, easing) {
if (duration === void 0) { duration = defaults_1.defaultTransitionDuration; }
if (easing === void 0) { easing = defaults_1.defaultTransitionEasing; }
if (!element || !prevClientRect || !nextClientRect) {
return null;
}
var newWidth = nextClientRect.width, newHeight = nextClientRect.height;
var width = prevClientRect.width, height = prevClientRect.height;
if (width === newWidth && height === newHeight) {
return null;
}
var widthDelta = Math.abs(width - newWidth);
var heightDelta = Math.abs(height - newHeight);
var options = {
duration: duration,
easing: easing,
};
if (typeof options.duration === "number" &&
widthDelta < animationDurationThreshold &&
heightDelta < animationDurationThreshold) {
var max = Math.max(widthDelta, heightDelta);
options.duration = (max * options.duration) / animationDurationThreshold;
}
var transition = {
width: [width + "px", newWidth + "px"],
height: [height + "px", newHeight + "px"],
};
return element.animate(transition, options);
};
exports.animateContainer = animateContainer;
var animateEnter = function (element, clientRect, settings) {
return animateContent(element, clientRect, settings);
};
exports.animateEnter = animateEnter;
var animateExit = function (element, clientRect, settings) {
var animationSettings = (Array.isArray(settings) ? settings : [settings]).filter(function (s) { return s; });
// Enforce fill 'forwards' for exit animation
for (var _i = 0, animationSettings_1 = animationSettings; _i < animationSettings_1.length; _i++) {
var setting = animationSettings_1[_i];
if (!setting.options) {
setting.options = {
fill: "forwards",
};
continue;
}
switch (setting.options.fill) {
case "backwards":
case "both":
setting.options.fill = "both";
break;
default:
setting.options.fill = "forwards";
}
}
return animateContent(element, clientRect, animationSettings);
};
exports.animateExit = animateExit;
function finishAnimation(animation) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var animationCount, counter;
return tslib_1.__generator(this, function (_a) {
animationCount = Array.isArray(animation) ?
animation.filter(function (a) { return a; }).length :
(animation ? 1 : 0);
counter = 0;
return [2 /*return*/, new Promise(function (resolve) {
if (!animationCount) {
resolve();
}
var onFinish = function () {
counter++;
if (counter === animationCount) {
resolve();
}
};
animationCallback(animation, function (anim) {
if (anim.playState === "finished") {
onFinish();
}
else {
anim.onfinish = onFinish;
}
});
})];
});
});
}
exports.finishAnimation = finishAnimation;
;
var isAnimationRunning = function (animation) {
var isRunning = false;
animationCallback(animation, function (anim) {
if (anim.playState === "running") {
isRunning = true;
}
});
return isRunning;
};
exports.isAnimationRunning = isAnimationRunning;
var cancelAnimation = function (animation) {
if (!animation) {
return;
}
animationCallback(animation, function (anim) {
anim.cancel();
});
};
exports.cancelAnimation = cancelAnimation;
var animationCallback = function (animation, callback) {
var animationArray = Array.isArray(animation) ? animation : [animation];
for (var _i = 0, animationArray_1 = animationArray; _i < animationArray_1.length; _i++) {
var anim = animationArray_1[_i];
if (anim && callback) {
callback(anim);
}
}
};
var animateContent = function (element, clientRect, settings) {
if (!element || !settings) {
return null;
}
var settingsArray = (Array.isArray(settings) ? settings : [settings]).filter(function (s) { return s; });
var settingsKeyframes = [];
for (var _i = 0, settingsArray_1 = settingsArray; _i < settingsArray_1.length; _i++) {
var setting = settingsArray_1[_i];
var keyframes = setting.keyframes;
if (clientRect) {
if (Array.isArray(setting.keyframes)) {
for (var i = 0, len = setting.keyframes.length; i < len; i++) {
keyframes[i] = replaceKeyframeVariable(setting.keyframes[i], clientRect);
}
}
else {
keyframes = replaceKeyframeVariable(setting.keyframes, clientRect);
}
}
settingsKeyframes.push(keyframes);
}
return settingsArray.map(function (setting, index) {
return element.animate(settingsKeyframes[index], setting.options);
});
};
var replaceKeyframeVariable = function (keyframe, clientRect) {
if (!keyframe || !clientRect) {
return keyframe;
}
var replacedKeyframe = tslib_1.__assign({}, keyframe);
var applyReplace = function (value) {
var newValue = value;
newValue = replaceVariable(newValue, clientRect.width.toString(), types_1.Variable.Width);
newValue = replaceVariable(newValue, clientRect.height.toString(), types_1.Variable.Height);
newValue = replaceVariable(newValue, clientRect.top.toString(), types_1.Variable.Top);
newValue = replaceVariable(newValue, clientRect.bottom.toString(), types_1.Variable.Bottom);
newValue = replaceVariable(newValue, clientRect.left.toString(), types_1.Variable.Left);
newValue = replaceVariable(newValue, clientRect.right.toString(), types_1.Variable.Right);
return newValue;
};
// tslint:disable-next-line: forin
for (var index in keyframe) {
var value = keyframe[index];
if (typeof value === "string") {
replacedKeyframe[index] = applyReplace(value);
}
if (Array.isArray(value)) {
var valueArray = [];
for (var _i = 0, value_1 = value; _i < value_1.length; _i++) {
var keyframeValue = value_1[_i];
if (typeof keyframeValue !== "string") {
valueArray.push(keyframeValue);
continue;
}
var newKeyframeValue = applyReplace(keyframeValue);
valueArray.push(newKeyframeValue);
}
replacedKeyframe[index] = valueArray;
}
}
return replacedKeyframe;
};
var replaceVariable = function (value, newValue, variable) {
if (!value || !variable) {
return value;
}
var regExp = new RegExp(variable);
if (regExp.test(value)) {
return value.replace(variable, newValue);
}
return value;
};