title: Trying to add animations to divs on their appearance and disappearance using React
body: <p>Let me explain you the scenario,</p>
  <ul>
  <li>I have 3 links/toggle buttons (Link 1, Link 2 &amp; Link 3) and 3 DIVS (Div 1, Div 2 &amp;
  Div 3).</li>
  </ul>
  <p>I am trying to add animations to DIVS,</p>
  <ul>
  <li>When I click on Link 1 above, Div 1 has to appear in center (Animation: Fade-In-Up).</li>
  <li>Similarly when I click on Link 3 then Div 1 and Div 3 should appear
  in center (Animation: Fade-In-Up).</li>
  <li>And also when I click on Link 2 then Div 1 and Div 2 should make way
  for Div 2 (Animation: Fade-In-Up) by moving towards their respective
  sides.</li>
  </ul>
  <p>All the 3 DIVs has to be centered,</p>
  <ul>
  <li>And if I re-click on Link 2, then Div 2 should disappear by moving
  towards Y direction (Animation: Fade-Out-Down), and Div 1 and Div 3
  should come closer by moving towards each other and centered.</li>
  </ul>
  <p>Kindly help me with this, struggling with this for so many days. Thanks in Advance. <a href="https://i.stack.imgur.com/7hrMh.png" rel="nofollow noreferrer">Refer this image for better understanding!</a></p>