Фильтр RevealTrans

Фильтр RevealTrans указывает, какой из возможных стандартных переходов применить при изменении контента элемента.

Для браузеров IE 5.5-7 фильтры можно подключать в CSS документ с помощью CSS свойства filter. В IE8+ для этого предусмотрено вендорное CSS свойство -ms-filter. Причем из-за особенностей синтаксического анализатора IE8 их порядок имеет значение: -ms-filter должен идти первым.

Синтаксис

div {
   -ms-filter:"progid:DXImageTransform.Microsoft.RevealTrans()";
   filter:progid:DXImageTransform.Microsoft.RevealTrans();

}

Параметры отделяются друг от друга запятой. Параметр состоит из двух частей: имени параметра и его значения, разделенных знаком равно. Значение параметра может быть взято в кавычки.

Параметры фильтра

Параметр	Описание	Возможные значения	Значение по умолчанию
duration	определяет время в секундах и миллисекундах, которое займет переход от старого значения к новому	действительное число с точкой между целой и дробной частью и четырьмя знаками после точки	нет
enabled	флаг, управляющий фильтром	true — фильтр включен false — фильтр отключен	true
transition	определяет тип перехода	0 — Box in (анимация сужения прямоугольника к центру) 1 — Box out (анимация расширения прямоугольника от центра) 2 — Circle in (анимация сужения круга к центру) 3 — Circle out (анимация расширения круга от центра) 4 — Wipe up (анимация перехода перемещением вверх) 5 — Wipe down (анимация перехода перемещением вниз) 6 — Wipe right (анимация перехода перемещением вправо) 7 — Wipe left (анимация перехода перемещением влево) 8 — Vertical blinds (анимация вертикальные жалюзи) 9 — Horizontal blinds (анимация горизонтальные жалюзи) 10 — Checkerboard across (анимация шахматной доски слева направо) 11 — Checkerboard down (анимация шахматной доски сверху вниз) 12 — Random dissolve (анимация перехода случайными пикселями) 13 — Split vertical in (анимация перехода сходящейся вертикальной трещиной ) 14 — Split vertical out (анимация перехода расходящейся вертикальной трещиной ) 15 — Split horizontal in (анимация перехода сходящейся горизонтальной трещина ) 16 — Split horizontal out (анимация перехода расходящейся горизонтальной трещиной ) 17 — Strips left down (анимация перехода диагональной полосой, идущей с левого нижнего угла) 18 — Strips left up (анимация перехода диагональной полосой, идущей с левого верхнего угла) 19 — Strips right down (анимация перехода диагональной полосой, идущей с правого нижнего угла) 20 — Strips right up (анимация перехода диагональной полосой, идущей с правого верхнего угла) 21 — Random bars horizontal (анимация перехода случайными горизонтальными полосами ) 22 — Random bars vertical (анимация перехода случайными вертикальными полосами ) 23 — случайный переход из вышеперечисленных	нет

Также с помощью скриптов можно узнавать состояние перехода и останавливать переход в заданный момент времени.

Пример

Элемент к которому применен случайный переход длительностью 10.5 сек.

div {
   -ms-filter:"progid:DXImageTransform.Microsoft.RevealTrans(transition=23, duration=10.5)";
   filter:progid:DXImageTransform.Microsoft.RevealTrans(transition=23, duration=10.5);
}

Фильтр не управляет переходами между значениями, а только указывает, указывает, какой из возможных стандартных переходов применить, а также регулирует длительность перехода. Управлять самим изменением контента элемента можно только с помощью скриптов.

Теги: фильтры, переходы, Internet Explorer

Показать комментарии