SMIL Transition

Transition kan effecten zoals 'verduisteren en oplichten' en 'wis' genereren voor elementen.

Transition behoort tot SMIL 2.0

Transition is een nieuwe functie in SMIL 2.0. Transition maakt geen deel uit van de SMIL 1.0 specificatie.

Internet Explorer 6 ondersteunt Transition gebaseerd op de SMIL 2.0 specificatie. Transition wordt geïmplementeerd door het <transitionfilter> element.

Eigenschappen

<transitionfilter> element bevat meerdere elementen, de meest gebruikte zijn:

Eigenschappen Beschrijving Voorbeeld
type Definieer het type van de transition-filter (zie lijst van transition-filters) type="clockWipe"
begin Definieer wanneer de transition begint begin="0s"
mode Definieer het modus van de transition mode="in"
from Definieer het begin van de transition from="0.2"
to Definieer het einde van de transition to="0.8"

Transition-filters

U kunt de volgende transition-filters gebruiken:

fade, barnDoorWipe, barWipe, clockWipe, ellipseWipe, fanWipe, irisWipe 
pushWipe, slideWipe, snakeWipe, spiralWipe, starWipe

Example: Display Transition

<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
<t:transitionfilter targetelement="keyb"
type="clockWipe"
begin="keyb.begin" dur="2s" />
<img id="keyb" class="t" src="pic_keyb.jpg" dur="4s"
width="128" height="107" />
</body>
</html>

In the example above, the image will be displayed for 4 seconds. The Transition filter will display the image for 2 seconds using the "clockWipe" method.

Tip:You must run Internet Explorer 6 to display this example.

TIY