Simple slide and fade animation

[danielo515]

Hello, First of all, thanks for this fantastic library, I really love how easy to use it is.

However, I have noted that the documentation is a bit targeted on people that is already familiar with velocity (which is not my case).

It took me a while before I figured out how to create a simple slide and fade animation. This means, at the same time something is sliding down to its full height, it fades from opacity 0 to one.

At te end I found that the easiest solution is to use a VelocityComponent to wrap a VelocityTransitionGroup

<VelocityComponent animation={{ opacity: this.state.showForm ? 1 : 0 }} duration={500}>
            <VelocityTransitionGroup component="div" 
                enter={{animation: 'slideDown', duration:500}}
                leave={{animation: 'slideUp', duration:500}}>
                { this.state.showForm && <CreateUser onSubmit={this.props.createUser}/> }
              </VelocityTransitionGroup>
            </VelocityComponent>

I was looking at the crossfade example, but it is too complex for my simple usage scenario. I tried to emulate something similar putting two transition group components together, but that didn't worked. If there is a better way to accomplish this , by registering a velocity animation for example, I would love to hear about it.

Again, many thanks.

[fionawhim]

Yeah, this is a bit complicated because slideDown / slideUp are custom animations in Velocity (in order to handle the height issue) so they can't be easily composed with the CSS animations.

I think what you have is reasonable.