react-component-transition
Version:
Easy animations between react component transitions.
44 lines (43 loc) • 1.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useEnterAnimation = void 0;
var tslib_1 = require("tslib");
var react_1 = require("react");
var animation_1 = require("../animation");
var types_1 = require("./types");
var useEnterAnimation = function (props) {
var enterAnimation = react_1.useRef([]);
var isRunning = react_1.useRef(false);
var transitionState = props.transitionState, prevChildren = props.prevChildren, getElement = props.getElement, nextClientRect = props.nextClientRect, settings = props.settings, disabled = props.disabled, onFinish = props.onFinish;
react_1.useEffect(function () { return function () {
animation_1.cancelAnimation(enterAnimation.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(enterAnimation.current)];
case 1:
_a.sent();
onFinish();
isRunning.current = false;
return [2 /*return*/];
}
});
}); };
react_1.useLayoutEffect(function () {
if (transitionState !== types_1.TransitionState.Enter) {
return;
}
if (!prevChildren || disabled) {
onFinish();
return;
}
if (isRunning.current) {
return;
}
isRunning.current = true;
enterAnimation.current = animation_1.animateEnter(getElement(), nextClientRect, settings);
finish();
});
};
exports.useEnterAnimation = useEnterAnimation;