CSSTransition from react-transition-group does not exit

Question

Trying to get used CSSTransiction component. I need to show a panel which is animated by using css-classes. The first class defines the primary location, the second defines position when the panel is opened (top: 0).

Appearing is working, but exiting does not. onEntered fires, onExied does not.

There is lack of documentation for CSSTransition component, I tried different combinations, but without success. Any ideas?

CSS:

.getSecondLevelPanel{
    position: fixed;
    left: 450px;
    top: -100%;
    height: 100%;
    width: 400px;
    transition: all 250ms ease-out;
}

.getSecondLevelPanelOpened {
    top: 0;
}  

React component:

import * as React from 'react';
import { CSSTransition } from 'react-transition-group';

export interface Props {
    isVisible: Boolean;
    children: React.ReactChild;
    onClose: () => void;
}

const SecondLevelPanel = (props: Props) => {
  return (
    <CSSTransition
        timeout={{
            enter: 0,
            exit: 500
        }}
        in={props.isVisible}
        appear={true}
        enter={true}
        exit={true}
        classNames={{
            appear: 'getSecondLevelPanel',
            enterDone: 'getSecondLevelPanel getSecondLevelPanelOpened',
            exit: 'getSecondLevelPanel'
        }}
        unmountOnExit={true}
        onEntered={() => {
            alert('entered');
        }}
        onExited={() => {
            alert('exited');
        }}
    >
        <div>
            <a onClick={() => props.onClose()}>Close</a>
            {props.children}
        </div>
    </CSSTransition>
  );
};

export default SecondLevelPanel;

Answer 1

After searching for answers for sometime, I realised my problem had to do with my toggle function (onClick={() => props.onClose()} in your case). It seems my toggle function was not working as it was supposed to. Since onEntered is triggered with "in{true}" and onExited is triggered with "in{false}", you have to make sure the boolean is being changed with each click on your anchor tag. Looking at your code is seems your onClose function only returns a void function instead of a toggle. Try toggling between true and false and pass that into the in{//toggle function} param.