Animate inside AnimateGroup ignores complete

[stroborobo]

Describe the bug
When an Animation with a complete prop is placed inside of an AnimationGroup the complete styles are not applied.

To Reproduce
https://codesandbox.io/s/animate-components-in-sequences-e18mv

Expected behavior
The completion styles are applied after the animation is completed.

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome 75 & Safari 12.1.1

[bluebill1049]

Hi @stroborobo,

Can you try with AniamteKeyFrames for now? leave the last keyFrame as complete style?

I will update the doc to exclude <Animate /> onCompelete for <AnimateGroup />.

The reason I didn't want to support onComplete style for <AnimateGroup /> is the nature of onComplete involves setTimeout, which will result in inaccurate animation. I guess for single <Aniamte /> is ok, but when you doing in a group or sequence you will see the unexpected animation result. hence <AniamteKeyFrames /> will perform better.

let me know if this makes sense and see if <AnimateKeyFrames /> works for you.

cheers
bill

[stroborobo]

I see, thanks for the fast reply. Turns out I didn't really need it in the first place, so I'm just using two independent Animations. But I'll keep your advice in mind for later :)

[bluebill1049]

no worries mate, happy to help with issues 👍

[bluebill1049]

going to close this issue, feel free to reopen if have more questions

[harry-sm]

For the onComplete callback instead of using a timer, you could use a transitionend event.

element.addEventListener('transitionend', () => {
  onComplete && onComplete();
});

[bluebill1049]

That would be amazing. Please send a PR.

[harry-sm]

No problem, I'll look at it this weekend. Not sure how to go about implementing this feature in the hooks though. Thinking of passing a ref const { play, style } = useAnimate({ ref: elRef }); so I can bind the listener to the element.

[bluebill1049]

lol maybe borrow react hook form's API, register :)

[harry-sm]

Never used react hook forms but I'll take a look at it

[harry-sm]

I've added the event listener but getting a few warning from jest. I think it has something to with the onComplete event firing after the test has completed. Im going to add a onComplete callback for animation keyframes. You can view the progress here for now repo

[bluebill1049]

that's awesome! @harry-sm