type property
Sets or gets the type of transition to be applied.
Syntax
| JScript |
|---|
|
Property values
Type: String
the name of the transition type that will be applied to renderable content. See the following table for possible values.
Remarks
type was introduced in Microsoft Internet Explorer 6.
This attribute is required and must be one of the transition families listed in the following table, or it must be an extended transition type provided by the user agent.
You can apply more than one transitionFilter to a given object. By doing this, you can apply more than one type of transition. This has the possible effect of multiple types of transitions occurring simultaneously to renderable content. See the following example.
If no subtype is specified, the default subtype associated with the transition type is used. The type starWipe is an exception; you must explicitly include the subtype of "fivePoint" for this transition to work.
| Type | Associated Subtypes |
|---|---|
| starWipe | fivePoint (this must be specified) |
| barWipe | leftToRight, topToBottom |
| barnDoorWipe | vertical, horizontal |
| irisWipe | rectangle, diamond |
| ellipseWipe | circle |
| clockWipe | clockwiseTwelve |
| fanWipe | centerTop |
| snakeWipe | topLeftHorizontal |
| spiralWipe | topLeftClockwise |
| pushWipe | fromLeft |
| slideWipe | fromLeft |
| fade | crossfade |
Note You can also use Cascading Style Sheets (CSS) transitions as values for TYPE. See Using HTML+TIME Transitions for more information.
Examples
This example demonstrates the different transition type values and the possible subtype values that can be used with those type values. In addition, the effects of changing various other attributes of the transitionFilter is also demonstrated.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/transitions/mastersample/master_sample.htm
This example shows three DIVs that have two different transitions applied to them simultaneously.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/htmltime/transitions/typeEX1.html
<HTML XMLNS:t = "urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
.time {behavior: url(#default#time2);}
</STYLE>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY>
<t:transitionfilter type="barWipe" id="tran1" dur="3"
targetElement="firstDiv"/>
<t:transitionfilter type="fade" id="tran1b" dur="3"
targetElement="firstDiv"/>
<t:transitionfilter type="snakeWipe" id="tran2" dur="3"
targetElement="secondDiv"/>
<t:transitionfilter type="barnDoorWipe" id="tran2b" dur="3" targetElement="secondDiv"
from="0" to="1" CalcMode="linear" mode="in" />
<DIV STYLE="height:170px;">
<DIV CLASS="time" ID="firstDiv" STYLE="position:absolute; top:150px;
left:20px; background-color:#3366CC; padding:10px; height:80; color:white;">
This div has fade and barwipe types applied.
</DIV>
<DIV CLASS="time" ID="secondDiv" STYLE="position:absolute; top:185px;
left:60px; background-color:#FFCC00; padding:10px; height:80;">
This div has snakeWipe and barnDoorWipe types applied.
</DIV>
</DIV>
</BODY>
</HTML>
See also
Conceptual