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?
Uldis
August 21, 2017, 5:05pm
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!
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.