0

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?

SsNewbie
  • 257
  • 2
  • 8
  • 21

1 Answers1

0

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.
palsrealm
  • 5,083
  • 1
  • 20
  • 25
  • This works like normal `display:block` and `display:none`. I want the component to slide and get displayed. Just like how a dropdown slides down slowly. Tried with @keyframes css, But its not working. – SsNewbie Oct 10 '17 at 02:02