Share via

transition Attribute | Transition Property

  • Article

Sets or retrieves the type of transition.

Syntax

HTML
{ filter:progid:DXImageTransform.Microsoft.RevealTrans(
    transition = iTransitionType ... ) ... }
Scripting
object.filters.item(
    "DXImageTransform.Microsoft.RevealTrans").Transition [ = iTransitionType ]

Possible Values

iTransitionType Integer that specifies or receives one of the following values:
0
Box in.
1
Box out.
2
Circle in.
3
Circle out.
4
Wipe up.
5
Wipe down.
6
Wipe right.
7
Wipe left.
8
Vertical blinds.
9
Horizontal blinds.
10
Checkerboard across.
11
Checkerboard down.
12
Random dissolve.
13
Split vertical in.
14
Split vertical out.
15
Split horizontal in.
16
Split horizontal out.
17
Strips left down.
18
Strips left up.
19
Strips right down.
20
Strips right up.
21
Random bars horizontal.
22
Random bars vertical.
23
Random transition from above possible values.

The property is read/write. The property has no default value.

Remarks

Transitions appear properly only on systems that have the color palette set to display 256 colors or more.

Examples

This example uses the Transition property to toggle between "circle in" and "circle out" transitions for the RevealTrans transition. Because the smaller red square is relatively positioned within its parent div element, positioning is also applied to the parent to make both elements transition together as a unit.

<SCRIPT>
function go() {
    C1.filters[0].Apply();
    if (C1.style.visibility == "visible") {
        C1.style.visibility = "hidden";
        C1.filters.revealTrans.transition=2;
    }
    else {
        C1.style.visibility = "visible";
        C1.filters[0].transition=3;
    }
    C1.filters[0].Play();
}
</SCRIPT>
<P><BUTTON onClick="go();">Play Transition</BUTTON></P>
<DIV ID="C1" STYLE="position:relative; visibility:visible;
   filter:revealTrans(DURATION=2, TRANSITION=3);
   width:300px; height:300px; background-color: lightgreen">
   <DIV STYLE="background-color=red;height=100px;width:100px;
      position:relative;top:100px;left:100px;"></DIV>
</DIV>

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/reveal.htm

The following example demonstrates each of the transitions in sequence.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/Overview/transall.htm

Applies To

RevealTrans

See Also

apply, play, Duration, stop