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);
}

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