Transitions can be useful for simple visual changes.


Very Important Text

Choose a different transition type from this list:

It can be worth using a transition to render something as simple as a change of text colour - try changing the transition type, then pressing the 'Change text colour' button.


You can transition a multi-object container (e.g. DIV) - and perform non-transitioned updates on an object even if it has a transition filter.

Clicking either of the buttons above ("Wipe.." or "Snap..") will make the same DIV either visible or hidden, depending on its current state. The DIV has a revealTrans() filter set in its inline style sheet.

Clicking the "Wipe.." button changes the DIV's .style.visibility property in them middle of the transition filter's .Apply() - .Play() method call 'sandwich'. Before that, the JavaScript function first sets the filter's .transition (transition type) property to 6 (wipe to right) or 7 (wipe to left), depending on whether the DIV is about to be revealed or hidden (this gives a neat 'wipe on, wipe back off' effect).

Pressing the "Snap.." button simply changes the DIV's .style.visibility property, without making any transition filter .Apply() and .Play() calls. As a result, the DIV is redisplayed just like a non-filtered object. Whenever a transition filter's .Play() method has completed, any visual property chnages made before the next call to the filter's .Apply() method are treated as normal, non-transitioned updates.


Back to Menu