CODEWITHSUNDEEP
javascriptanimationdojochaining
Emma
Emma

Reputation: 335

dojo: Perform function after animation is complete

I'm trying to chain an animation and a function together, so that when the user clicks on a button the animation plays, and, when it's finished, a function performed.

In particular, what I'm trying to do is allow the user to pin a menu in place or unpin it so that it floats down the page with them. I control whether the menu is pinned or unpinned by toggling the class 'pinned' when they click the button. I want an animation to play to make the transition smooth (like the menu fading out or sliding to it's new position), and then toggle the class.

Unfortunately, the class is toggling before the animation is finished, making the menu jump as it switches between the two.

Is there a way of delaying the toggle class until the animation is done?

Upvotes: 0

Views: 611

Answers (1)

Craig Swing
Craig Swing

Reputation: 8162

The animation has an End event that you can listen on.

http://dojotoolkit.org/reference-guide/1.9/dojo/fx/chain.html http://dojotoolkit.org/documentation/tutorials/1.7/animation/

require(["dojo/fx", "dojo/on"], function(coreFx, on){
  var animA = ...
  var animB = ...

  var chain = coreFx.chain([animA, animB]);

  on(chain, "End", function(){
    // set the css
  });

  chain.play();
});

Upvotes: 1

Related Questions