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