Adding a transition effect to a component is a great way to provide a subtle yet distinctive feel in your application.
For example, adding a
Fade as the
rollOverEffect for a component so it gradually fades in when the user moves the mouse over the component.
However this method is not without its faults.
Say you want to add a
Fade as the
rollOutEffect for the same component so it gradually fades out when the user moves the mouse away from the component.
This will work fine, until the
Fade effects come into contact with one another.
The problem is if the
rollOutEffect fires before the
rollOverEffect finishes (or vice-versa) Flex will end the unfinished effect and play the new one. The result is a jagged transition.
Luckily, this is something we can easily correct.
First step? Ignore
rollOutEffect. They aren’t doing us any good. Define custom event handlers for
Next, configure your
Fade effects to work together. Instead of adjusting the
alpha from min to max (roll over) and max to min (roll out), adjust it from the current value to max and the current value to min.
While seemingly innocuous, this is the key to a smooth transition.
The last step is to check if the effects are already playing in your event handlers. In the roll out event handler, check if the fade in effect is playing and if so, stop it before playing the fade out effect. Implement the roll over event handler in a similar manner.
In the end you should end up with something like this:
Since these transitions take the current state into consideration, they will always smoothly animate from the current state to their target state.
And that, my friends, is how we do it in the NBA.