SMIL Transition
Transition 能夠為元素生成“淡入淡出”以及“擦除”等效果。
Transition 屬于 SMIL 2.0
Transition 是 SMIL 2.0 中的新特性。Transition 不屬于 SMIL 1.0 規(guī)范的組成部分。
Internet Explorer 6 支持基于 SMIL 2.0 規(guī)范的 Transition。Transition 由 <transitionfilter> 元素實現(xiàn)。
屬性
<transitionfilter> 元素擁有若干元素,最常用的有:
屬性 | 描述 | 例子 |
---|---|---|
type | 定義 transition 濾鏡的類型(參閱 transition 濾鏡列表) | type="clockWipe" |
begin | 定義何時開始 transition | begin="0s" |
mode | 定義 transition 模式 | mode="in" |
from | 定義 transition 的開始值 | from="0.2" |
to | 定義 transition 的結(jié)束值 | to="0.8" |
Transition 濾鏡
可使用下面的 transition 濾鏡:
fade, barnDoorWipe, barWipe, clockWipe, ellipseWipe, fanWipe, irisWipe, pushWipe, slideWipe, snakeWipe, spiralWipe, starWipe
實例:顯示 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>
在上面的例子中,圖像將顯示 4 秒鐘。Transition 濾鏡將用 2 秒鐘以 "clockWipe" 的方式把圖像顯示出來。
提示:您必須運行 Internet Explorer 6 來顯示這個例子。