Transition on Mount and Unmount

Question

basically I want to do smth like:

visible ?
<Fade>
   <SomeComponent/>
</Fade> 
: undefined

So I want to transit single elemnts for now, and wouldn't really like to manage the Fade's state from a parent component.

I just want the Fade to be triggered on mount and on unmount. What is the best way to do this?

Answer 1

It depends but you can do it in css with keyframes

ex:

@keyframes myAnimation {
  0%   { opacity: 0; }
  50% { opacity: 1; }
  100%   { opacity: 0; }
}

Then use it like:

 animation:         myAnimation 5s;