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

Easy animations between react component transitions.

import { __awaiter, __generator } from "tslib";
import { useEffect, useRef } from "react";
import { animateExit, finishAnimation, cancelAnimation, } from "../animation";
import { TransitionState } from "./types";
export var useExitAnimation = function (props) {
    var exitAnimation = useRef([]);
    var isRunning = useRef(false);
    var prevChildren = props.prevChildren, onFinish = props.onFinish, transitionState = props.transitionState, getElement = props.getElement, settings = props.settings, prevClientRect = props.prevClientRect, disabled = props.disabled;
    useEffect(function () { return function () {
        cancelAnimation(exitAnimation.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(exitAnimation.current)];
                case 1:
                    _a.sent();
                    // Cancel the fill: "forwards" set by animateExit
                    cancelAnimation(exitAnimation.current);
                    onFinish();
                    isRunning.current = false;
                    return [2 /*return*/];
            }
        });
    }); };
    useEffect(function () {
        if (transitionState !== TransitionState.Exit) {
            return;
        }
        if (!prevChildren || disabled) {
            onFinish();
            return;
        }
        if (isRunning.current) {
            return;
        }
        // Cancel the fill: "forwards" set by animateExit
        cancelAnimation(exitAnimation.current);
        isRunning.current = true;
        exitAnimation.current = animateExit(getElement(), prevClientRect, settings);
        finish();
    });
};