Callback delay doesn't work in DeactivatingAnimation

How-to Discussions
1

I was expecting that the foo method below is called 5 seconds after the animation is deactivated.

<DeactivatingAnimation>
      <Callback Handler="{foo}" Delay="5"/> 
</DeactivatingAnimation>

However, it triggers the method immediately. What could be wrong here?

2

There’s nothing wrong except the expectations.

A DeactivatingAnimation provides a continuous progress for when a page is being deactivated - for the whole length of deactivation. So you should use this trigger on a continuous modifier, something like a Change. In this case, Delay makes very little sense.

<App>
    <PageControl>
        <Panel ux:Name="redPage" Color="#f00">
            <DeactivatingAnimation>
                <Change redPage.Opacity="0" />
            </DeactivatingAnimation>
        </Panel>
        <Panel ux:Name="bluePage" Color="#00f">
            <DeactivatingAnimation>
                <Change bluePage.Opacity="0" />
            </DeactivatingAnimation>
        </Panel>
    </PageControl>
</App>

If you need to pulse a Callback, you should use a pulse trigger, for example Deactivated - this one gets pulsed when the page has become inactive, and supports adding a Delay on nested triggers.

<App>
    <JavaScript>
    function redDeactivated() {
        console.log("red deactivated");
    }
    function blueDeactivated() {
        console.log("blue deactivated");
    }
    module.exports = {
        redDeactivated: redDeactivated,
        blueDeactivated: blueDeactivated
    };
    </JavaScript>
    <PageControl>
        <Panel ux:Name="redPage" Color="#f00">
            <DeactivatingAnimation>
                <Change redPage.Opacity="0" />
            </DeactivatingAnimation>
            <Deactivated>
                <Callback Handler="{redDeactivated}" Delay="3" />
            </Deactivated>
        </Panel>
        <Panel ux:Name="bluePage" Color="#00f">
            <DeactivatingAnimation>
                <Change bluePage.Opacity="0" />
            </DeactivatingAnimation>
            <Deactivated>
                <Callback Handler="{blueDeactivated}" Delay="3" />
            </Deactivated>
        </Panel>
    </PageControl>
</App>

Hope this helps!

3

This is a great answer and <Deactivated> is exactly what I’m looking for. Thanks!

I should have read this but I’m still a bit confused about animations, triggers, callbacks but it’s getting better with these clear answers.