react-component-transition
Version:
Easy animations between react component transitions.
40 lines (39 loc) • 1.82 kB
JavaScript
import { __awaiter, __generator } from "tslib";
import { useLayoutEffect, useRef, useEffect } from "react";
import { animateContainer as startAnimation, finishAnimation, cancelAnimation } from "../animation";
import { TransitionState } from "./types";
export 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 = useRef(null);
var isRunning = useRef(false);
useEffect(function () { return function () {
cancelAnimation(transitionAnimation.current);
}; }, []);
var finish = function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, finishAnimation(transitionAnimation.current)];
case 1:
_a.sent();
onFinish();
isRunning.current = false;
return [2 /*return*/];
}
});
}); };
useLayoutEffect(function () {
if (transitionState !== TransitionState.Container) {
return;
}
if (!getElement() || !animateContainer || !prevClientRect || disabled) {
onFinish();
return;
}
if (isRunning.current) {
return;
}
isRunning.current = true;
transitionAnimation.current = startAnimation(getElement(), prevClientRect, nextClientRect, props.animateContainerDuration, props.animateContainerEasing);
finish();
});
};