How to stop animation in Dojo

Question

Using Dojo 1.9, I'm playing some animations like this:

that.fadeOutActive = baseFx.fadeOut({ node: "active-container", duration: 1000, delay: 3000 });
that.fadeInInactive = baseFx.fadeIn({ node: "inactive-container", duration: 1000, delay: 3000 });
coreFx.combine([that.fadeOutActive, that.fadeInInactive]).play();

and then try to stop them on an event, like this:

coreFx.combine([that.fadeOutActive, that.fadeInInactive]).stop();

The problem is, this prevents the animation from firing (which is the desired behavior), but it doesn't stop it if it had already begun (which is the problem). How can I stop the animation, if I can at all?

EDIT: It turns out my problem was not in the code I've posted, it was in detecting if the animation is in progress.

Answer 1

dojo/fx::combine() is a helper function that can take a list of dojo/_base/fx::Animation objects and combine them so that their effects all run in parallel. With this function animations that affect multiple nodes can be generated and executed at the same time.

You are using coreFx.combine to simultaneously fadeIn one element and fadOut another element.

Instead of creating a new combined Animation you should store a reference to the existing combined animation and then use that reference to stop the combined animation:

that.fadeOutActive = baseFx.fadeOut({ node: "active-container", duration: 1000, delay: 3000 }).play();
that.fadeInInactive = baseFx.fadeIn({ node: "inactive-container", duration: 1000, delay: 3000 }).play();
that.combinedAnim = coreFx.combine([that.fadeOutActive, that.fadeInInactive]).play();

and then later:

that.combinedAnim.stop();