react-component-transition/build/esm/transition/animation-hooks/use-enter-animation.js

Easy animations between react component transitions.

import { __awaiter, __generator } from "tslib";
import { useLayoutEffect, useRef, useEffect } from "react";
import { animateEnter, finishAnimation, cancelAnimation } from "../animation";
import { TransitionState } from "./types";
export var useEnterAnimation = function (props) {
    var enterAnimation = useRef([]);
    var isRunning = useRef(false);
    var transitionState = props.transitionState, prevChildren = props.prevChildren, getElement = props.getElement, nextClientRect = props.nextClientRect, settings = props.settings, disabled = props.disabled, onFinish = props.onFinish;
    useEffect(function () { return function () {
        cancelAnimation(enterAnimation.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(enterAnimation.current)];
                case 1:
                    _a.sent();
                    onFinish();
                    isRunning.current = false;
                    return [2 /*return*/];
            }
        });
    }); };
    useLayoutEffect(function () {
        if (transitionState !== TransitionState.Enter) {
            return;
        }
        if (!prevChildren || disabled) {
            onFinish();
            return;
        }
        if (isRunning.current) {
            return;
        }
        isRunning.current = true;
        enterAnimation.current = animateEnter(getElement(), nextClientRect, settings);
        finish();
    });
};