New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animation complete callback called many times #7146

Open
paulo-raca opened this Issue Sep 13, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@paulo-raca
Contributor

paulo-raca commented Sep 13, 2017

Expected behaviour

When using a complete callback on a animation, it should be called once, when everything is complete.

Actual behaviour

The callback is called a bazillion times.
I guess it's being called after the final animation step of each element being animated.

Live demo with steps to reproduce

http://jsfiddle.net/0186u06j/

Affected browser(s)

Google Chrome 60

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Sep 14, 2017

Collaborator

Yes that's what happens... The animation config gets passed on to all the elements that are animated.

It also happens with other functions: http://jsfiddle.net/highcharts/0186u06j/1/

I'm not quite sure how to handle that, it would require some restructuring and rethinking of animation, and it will definately be prone to regressions.

A simple workaround would be to set a flag from the callback to ensure it only runs once.

Collaborator

TorsteinHonsi commented Sep 14, 2017

Yes that's what happens... The animation config gets passed on to all the elements that are animated.

It also happens with other functions: http://jsfiddle.net/highcharts/0186u06j/1/

I'm not quite sure how to handle that, it would require some restructuring and rethinking of animation, and it will definately be prone to regressions.

A simple workaround would be to set a flag from the callback to ensure it only runs once.

@paulo-raca

This comment has been minimized.

Show comment
Hide comment
@paulo-raca

paulo-raca Dec 11, 2017

Contributor

This came back to bite my ass 😞

I was doing as you said and only invoking the callback when the first element finishes it's animation.

That worked fine until this change: b4b4221#diff-4902869e857fed10664dc3f6cb635c92R182

That is, now the callback is invoked immediately for those elements that didn't change, and then again after a while, when the actual animation finishes.

How have you been handling that?

Contributor

paulo-raca commented Dec 11, 2017

This came back to bite my ass 😞

I was doing as you said and only invoking the callback when the first element finishes it's animation.

That worked fine until this change: b4b4221#diff-4902869e857fed10664dc3f6cb635c92R182

That is, now the callback is invoked immediately for those elements that didn't change, and then again after a while, when the actual animation finishes.

How have you been handling that?

paulo-raca added a commit to paulo-raca/highcharts-draggable-3d that referenced this issue Dec 11, 2017

@paulo-raca

This comment has been minimized.

Show comment
Hide comment
@paulo-raca

paulo-raca Dec 11, 2017

Contributor

I've found a temporary workaround, but it is probably a bug:

  • When called immediately due to unmodified values, the callback's this is the animation options.
  • When called at the end of the actual animation, this is the SVGElement affected by the animation
Contributor

paulo-raca commented Dec 11, 2017

I've found a temporary workaround, but it is probably a bug:

  • When called immediately due to unmodified values, the callback's this is the animation options.
  • When called at the end of the actual animation, this is the SVGElement affected by the animation

TorsteinHonsi added a commit that referenced this issue Dec 12, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment