Show the menu with a fade transition ?

[baptisteArno]

I tried using CSSTransitionGroup like so:

<CSSTransitionGroup
        transitionName="test"
        transitionEnterTimeout={500}
        transitionLeaveTimeout={300}
>
    <Menu className="MyMenuButton-menu">
        <ul>{musicMenuItems}</ul>
    </Menu>
</CSSTransitionGroup>

test class definitions:

.test-enter {
  opacity: 0.01;
}

.test-enter.test-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.test-leave {
  opacity: 1;
}

.test-leave.test-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

This doesn't work. Any idea how to show the menu with a fade animation?

[shirshendubhowmick]

Is it possible to host the example in codepen or somewhere else ? I have seen people using CSS only to animate the menu, need to check whats wrong in this case. Thanks.