如何使用ReactCSStransitionGroup或ReactTransitionGroup在React JS中滑动无状态组件？

Question

I want to slide a stateless component, which will be initially set to display:none , to be visible after state change in one of its parent component, as if it is slide down just like a dropdown. I am new to animation part, I was trying out this_link .

So far what i tried in Sandbox ( https://codesandbox.io/s/0xrjp051pp ).

Can someone help on this?

Answer 1

Here is the modified Sandbox with the transition working. https://codesandbox.io/s/nrz8vlmrrl The only thing that you need to fix is the CSS code to get it to work a desired.

The changes I made are as follows.

1. Changed the transition class in CSS to display the component. It had display:none previously.
2. Show and hide the component based on the prop that you were passing but not using in your component SubComponent .