// которая будет вызвана с элементом е в виде аргумента по завершении анимации.
// Если аргумент time не задан, устанавливается интервал 500 мсек.
// Эта функция не работает в IE, но ее можно модифицировать так, чтобы
// в дополнение к свойству opacity она использовала нестандартное
// свойство filter, реализованное в IE.
function fadeOut(e, oncomplete, time) {
if (typeof e === "string") e = document.getElementByld(e);
if (!time) time = 500;
//
В качестве простой "функции перехода", чтобы сделать анимацию немного
// нелинейной, используется Math.sqrt: сначала растворение идет быстро,
// а затем несколько замедляется,
var ease = Math.sqrt;
var start = (new Date).getTime; // Запомнить момент начала анимации
animate; // И запустить анимацию
function animate {
var elapsed = (new Date).getTime-start; // Прошедшее время
var fraction = elapsed/time; // Доля от общего времени
if (fraction < 1) { // Если не пора завершать
var opacity = 1 - ease(fraction); // Вычислить непрозрачн.
e.style.opacity = String(opacity); // Установить ее в e
setTimeout(animate, // Запланировать очередной
Math.min(25, time-elapsed)); // кадр
}
else { // Иначе завершить
e.style.opacity = "0"; // Сделать е полностью прозрачным
if (oncomplete) oncomplete(e); // Вызвать ф-цию обратного вызова
}
}
}
Обе функции,
shake
и
fadeOut,
принимают необязательную функцию обратного вызова во втором аргументе. Если эта функция указана, она будет вызвана по завершении воспроизведения анимационного эффекта. Элемент, к которому применялся анимационный эффект, будет передан функции обратного вызова в виде аргумента. Следующая разметка HTML создает кнопку, для которой после щелчка на ней воспроизводится эффект встряхивания, а затем эффект растворения:
<button onclick="shake(this, fadeOut);">Встряхнуть и pacтворить</button>
Обратите внимание, насколько функции
shake
и
fade0ut
похожи друг на друга. Они обе могут служить шаблонами для реализации похожих анимационных эффектов с использованием CSS-свойств. Однако клиентские библиотеки, такие как jQuery, обычно поддерживают набор предопределенных визуальных эффектов, поэтому вам вообще может никогда не потребоваться писать собственные функции воспроизведения анимационных эффектов, такие как
shake,
если только вам не понадобится создать какой-нибудь сложный визуальный эффект. Одной из первых и наиболее примечательных библиотек визуальных эффектов является библиотека Scriptaculous, которая предназначалась для работы в составе фреймворка Prototype. За
дополнительной информацией обращайтесь по адресуи http://scripty2.com/.
Модуль «CSS3 Transitions» определяет еще один способ реализации анимационных эффектов с помощью таблиц стилей, полностью устраняющий необходимость писать программный код. Например, вместо функции
fadeOut
можно было бы определить правило CSS, как показано ниже:
.fadeable { transition: opacity .5s ease-in }
Это правило говорит, что всякий раз, когда изменяется непрозрачность элемента с классом «fadeable», это изменение должно протекать плавно (от текущего до нового значения) в течение половины секунды с использованием нелинейной функции перехода. Модуль «CSS Transitions» еще не был стандартизован, но его положения уже реализованы в броузерах Safari и Chrome в виде свойства
– webkit-transition
. На момент написания этих строк в Firefox 4 также была добавлена поддержка свойства -
moz-transition
.
16.4. Вычисленные стили
Свойство
style
элемента опредёляет встроенный стиль элемента. Оно имеет преимущество перед всеми таблицами стилей и с успехом может применяться для установки CSS-свойств для изменения визуального представления элемента. Однако в общем случае к нему нет смысла обращаться, когда требуется узнать фактически примененные к элементу стили. То, что требуется в этом случае, называется вычисленным стилем. Вычисленный стиль элемента - это набор значений свойств, которые броузер получил (или вычислил) из встроенного стиля и всех правил из всех таблиц стилей, которые применяются к элементу: это набор свойств, фактически используемый при отображении элемента. Подобно встроенным стилям, вычисленные стили представлены объектом
CSSStyleDeclaration
. Однако в отличие от встроенных стилей, вычисленные стили доступны только для чтения. Эти стили нельзя изменить, но вычисленный объект
CSSStyleDeclaration
позволяет точно узнать значения свойств стилей, которые броузер использовал при отображении соответствующего элемента.
Получить вычисленный стиль элемента можно с помощью метода
getComputedStyle
объекта
Window
. Первым аргументом этому методу передается элемент, вычисленный стиль которого требуется вернуть. Второй аргумент является обязательным, и в нем обычно передается значение null или пустая строка, но в нем также может передаваться строка с именем псевдоэлемента CSS, таким как «:before», «:after», «:first-line» или «:first-letter»:
var title = document.getElementById("section1title");
var titlestyles = window.getComputedStyle(element, null);
Возвращаемым значением метода
getComputedStyle
является объект
CSSStyleDeclaration
, представляющий все стили, применяемые к указанному элементу (или псевдоэлементу). Между объектами
CSSStyleDeclaration
, представляющими встроенные стили и вычисленные стили, существует множество существенных отличий:
• Свойства вычисленного стиля доступны только для чтения.
• Свойства вычисленных стилей имеют абсолютные значения: относительные единицы измерения, такие как проценты и пункты, преобразуются в абсолютные значения. Любое свойство, которое определяет размер (например, ширина поля или размер шрифта) будет иметь значение, выраженное в пикселах. То есть его значением будет строка с суффиксом «рх», поэтому вам необходимо будет реализовать ее синтаксический анализ, зато не придется беспокоиться об определении и преобразовании единиц измерений. Значения свойств, определяющих цвет, будут возвращаться в формате «rgb(#,#,#)» или «rgba(#,#,#,#)».