TYPE Attribute | type Property (t:TRANSITIONFILTER) (Internet Explorer - HTML+Time 2)

HTML (DHTML)

TYPE Attribute | type Property

Internet Development Index

Sets or retrieves the type of transition to be applied.

Syntax

HTML<t:TRANSITIONFILTER TYPE = sType... >
Scriptingt:TRANSITIONFILTER.type [ = sType ]

Possible Values

sTypeString that specifies or receives the name of the transition type that will be applied to renderable content. See the table below for possible values.

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

Remarks

This attribute is required and must be one of the transition families listed in the table below, 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 example below.

If no subtype is specified, the default subtype associated with the transition type will be used. The type starWipe is an exception. It is required to explicitly include the subtype of "fivePoint" for this transition to work.

TypeAssociated Subtype(s)
starWipefivePoint (this must be specified)
barWipeleftToRight, topToBottom
barnDoorWipevertical, horizontal
irisWiperectangle, diamond
ellipseWipecircle
clockWipeclockwiseTwelve
fanWipecenterTop
snakeWipetopLeftHorizontal
spiralWipetopLeftClockwise
pushWipefromLeft
slideWipefromLeft
fadecrossfade

Note  You can also use Cascading Style Sheets (CSS) transitions as values for TYPE. See TYPE And SUBTYPE 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.

This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

This example shows three DIVs that have two different transitions applied to them simultaneously.

<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>
This feature requires Microsoft?Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Applies To

t:TRANSITIONFILTER

See Also

Introduction to HTML+TIME, Using HTML+TIME Transitions