Chuyển đổi SMIL

Transition có thể tạo ra hiệu ứng "mờ vào mờ ra" và "xóa mờ" cho các phần tử.

Transition thuộc về SMIL 2.0

Transition là tính năng mới trong SMIL 2.0. Transition không phải là phần của tiêu chuẩn SMIL 1.0.

Internet Explorer 6 hỗ trợ Transition dựa trên tiêu chuẩn SMIL 2.0. Transition được thực hiện bởi phần tử <element chuyển đổi>.

Thuộc tính

<element chuyển đổi> có nhiều phần tử, trong đó phổ biến nhất là:

Thuộc tính Mô tả Mẫu
type Định nghĩa loại bộ lọc chuyển đổi (xem danh sách bộ lọc chuyển đổi) type="clockWipe"
begin Định nghĩa khi bắt đầu chuyển đổi begin="0s"
mode Định nghĩa chế độ chuyển đổi mode="in"
from Định nghĩa giá trị bắt đầu của chuyển đổi from="0.2"
to Định nghĩa giá trị kết thúc của chuyển đổi to="0.8"

Bộ lọc chuyển đổi

Có thể sử dụng các bộ lọc chuyển đổi sau:

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

Ví dụ: Hiển thị 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>

Trong ví dụ trên, hình ảnh sẽ hiển thị trong 4 giây. Chuyển đổi lọc sẽ hiển thị hình ảnh trong 2 giây bằng cách "clockWipe".

Lưu ý:Bạn phải chạy Internet Explorer 6 để hiển thị ví dụ này.

TIY