TYPE Attribute | type Property | Internet Development Index |
Sets or retrieves the type of transition to be applied.
Syntax
HTML <t:TRANSITIONFILTER TYPE = sType... > Scripting t:TRANSITIONFILTER.type [ = sType ]
Possible Values
sType String 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.
Type Associated Subtype(s) 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 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>
Applies To
t:TRANSITIONFILTER
See Also
Introduction to HTML+TIME, Using HTML+TIME Transitions