react-component-transition
Version:
Easy animations between react component transitions.
48 lines (47 loc) • 2.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useExitAnimation = void 0;
var tslib_1 = require("tslib");
var react_1 = require("react");
var animation_1 = require("../animation");
var types_1 = require("./types");
var useExitAnimation = function (props) {
var exitAnimation = react_1.useRef([]);
var isRunning = react_1.useRef(false);
var prevChildren = props.prevChildren, onFinish = props.onFinish, transitionState = props.transitionState, getElement = props.getElement, settings = props.settings, prevClientRect = props.prevClientRect, disabled = props.disabled;
react_1.useEffect(function () { return function () {
animation_1.cancelAnimation(exitAnimation.current);
}; }, []);
var finish = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, animation_1.finishAnimation(exitAnimation.current)];
case 1:
_a.sent();
// Cancel the fill: "forwards" set by animateExit
animation_1.cancelAnimation(exitAnimation.current);
onFinish();
isRunning.current = false;
return [2 /*return*/];
}
});
}); };
react_1.useEffect(function () {
if (transitionState !== types_1.TransitionState.Exit) {
return;
}
if (!prevChildren || disabled) {
onFinish();
return;
}
if (isRunning.current) {
return;
}
// Cancel the fill: "forwards" set by animateExit
animation_1.cancelAnimation(exitAnimation.current);
isRunning.current = true;
exitAnimation.current = animation_1.animateExit(getElement(), prevClientRect, settings);
finish();
});
};
exports.useExitAnimation = useExitAnimation;