Chaining collapse animations with their children

[google-fabric]

Chaining collapse animations with their children

[fionawhim]

For the delayed element, you could do a custom animation that just went from opacity: 0 -> 1. You can put a "style" attribute for opacity: 0 on the enter/leave prop that will get set immediately, and then the animation would start after a delay.

I think the delay is not really the issue as much as the Velocity UI Pack "In" transitions always starting from "display: none".

At any rate, glad you have something, and maybe this gives you ideas for improving it.

[fionawhim]

The reason the child animation is not running is because, to React, the inner VelocityTransitionGroup and its child are appearing in the DOM together. By default, the animations only run on children that enter/leave an existing TransitionGroup.

To get the behavior you want, add runOnMount={true} to the inner VelocityTransitionGroup so that it will animate in this circumstance.

While there’s no cross-element chaining as you see, it should be fairly easy to just add a delay on the inner animations so that they start when you want them to. (This gives you the flexibility to tweak things so that the fade in overlaps with the slide down if it’s appropriate.)

It's also possible to use custom UI Pack effects to do chaining in most circumstances (see velocityHelpers.registerEffect) but that likely won’t work in this case because the “slide” effects are custom internal to Velocity in order to get implicit heights right.

Also, make sure to have key properties on all children of VelocityTransitionGroup.

Does that fix things?

[arush]

inner VelocityTransitionGroup runOnMount={true} causes a flicker, and the parent slideDown doesn't animate, but the inner does

changed the inner to a VelocityComponent with runOnMount={true}, does not animate, just renders in the final position, but the parent works ok. NB: delay is not working on the inner

[fionawhim]

Hrm. Digging in, in slow motion, I noticed a few things.

First up, there's a bug in VelocityTransitionGroup where it won’t run any animations unless a leave prop is set. I’ll get a fix for this out later today.

Second, it may help to make sure any inner element is block-level. React’s TransitionGroup (and by extension, VelocityTransitionGroup) is a <span> by default. Use component="div" to change this.

I don’t know if slideDown and delay are going to work well together. slideDown calculates the target height when it’s called. If you’re doing that on an element whose child’s animation is delayed, that child may have display: none and therefore not influence its parent’s height.

You could probably work around that by writing a custom animation for the child that doesn’t affect the display and therefore height. (By default all Velocity UI Pack “In” and “Out” animations mess with display.)

[arush]

ok you're right about slideDown and delay being incompatible, that makes sense. I was already using block elements, so it was just the slideDown and delay issue.

In the end, i had to hardcode the height, and make the outer component a VelocityComponent animating the height, then the inner is a VelocityTransitionGroup. Unfortunately its pretty messy code, so I wish there was some built-in support for either animating to/from height:auto or the aforementioned slideDown<->delay issue.