SMIL Transition
SMIL 2023-05-25 14:28:13小码哥的IT人生
SMIL Transition
Transition 能够为元素生成“淡入淡出”以及“擦除”等效果。
Transition 属于 SMIL 2.0
Transition 是 SMIL 2.0 中的新特性。Transition 不属于 SMIL 1.0 规范的组成部分。
Internet Explorer 6 支持基于 SMIL 2.0 规范的 Transition。Transition 由 <transitionfilter> 元素实现。
属性
<transitionfilter> 元素拥有若干元素，最常用的有：
| 属性 | 描述 | 例子 |
|---|---|---|
| type | 定义 transition 滤镜的类型（参阅 transition 滤镜列表） | type="clockWipe" |
| begin | 定义何时开始 transition | begin="0s" |
| mode | 定义 transition 模式 | mode="in" |
| from | 定义 transition 的开始值 | from="0.2" |
| to | 定义 transition 的结束值 | 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 来显示这个例子。
完整实例【TIY】：
<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="/i/eg_sun.gif" dur="4s" />
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
