Переходы

Internet Explorer 10 и приложения Магазина Windows на JavaScript поддерживают переходы каскадных таблиц стилей уровня 3 (CSS3). С помощью переходов вы можете создавать простые эффекты анимации за счет плавного изменения значений свойств каскадных таблиц стилей (CSS) в определенный промежуток времени. Например, можно изменять размер и цвет объекта в течение 10 секунд. Эффект, для которого раньше приходилось разрабатывать сложную комбинацию CSS и JavaScript, теперь можно получить, используя только CSS. Переходы CSS3 определены консорциумом W3C в спецификации Модуль переходов CSS уровня 3, которая сейчас находится в стадии рабочего проекта.

Примечание  Раньше для работы с Internet Explorer 10 и приложениями Магазина Windows на JavaScript свойствам и событию, описанным в этом разделе, требовался специальный префикс поставщика (Майкрософт) — "-ms-". Этот префикс больше не требуется, но он по-прежнему будет распознаваться. Чтобы в будущем обеспечить совместимость приложений, использующих префикс поставщика Майкрософт, со свойствами перехода, необходимо будет выполнить соответствующие обновления.

В этом разделе предоставляется обзор свойств, составляющих переходы CSS3, а также показан простой пример использования переходов.

Дополнительные сведения о списке свойств CSS, к которым можно применить переходы, см. в разделе Свойства анимаций и переходов.

Свойство transition-property

Свойство transition-property используется для идентификации одного или нескольких свойств CSS, к которым будут применены эффекты перехода при указании нового значения свойства.

СвойствоОписание

transition-property

Указывает имя или имена свойств CSS, к которым применяется эффект перехода при задании нового значения свойства. Свойство transition-property может быть задано либо в виде разделенного запятыми списка свойств CSS, либо как одно из следующих значений:

  • none  Эффект перехода не применяется при задании нового значения свойства. Все свойства переходов игнорируются.
  • all  Это значение используется по умолчанию. Каждое свойство, поддерживающее переходы, имеет эффект перехода, применяемый, когда задается новое значение для свойства.

 

Помимо применения переходов к основным свойствам CSS, таким как размещение, цвет, шрифты и т. д., вы можете также использовать переходы для новых поддерживаемых свойств CSS, например opacity и border-radius, и для двухмерных и трехмерных преобразований.

Помните, что когда вы прерываете переход, изменения автоматически отменяются.

Свойство transition-duration

Свойство transition-duration определяет время, необходимое для перехода.

СвойствоОписание

transition-duration

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

 

Свойство transition-timing-function

Свойство transition-timing-function позволяет изменять скорость в процессе перехода, описывая способ вычисления промежуточных значений, используемых во время перехода. Это можно сделать, настроив функцию синхронизации, основанную на кривой Безье третьего порядка, которая использует четыре параметра.

Вы можете либо явным образом задать кривую, указав вручную четыре значения функции cubic-bezier, либо выбрать одно из нескольких ключевых слов, каждое из которых соответствует распространенной функции синхронизации.

СвойствоОписание

transition-timing-function

Задает одну или несколько функций синхронизации, разделенных запятыми, которые определяют промежуточные значения свойств, используемых во время перехода для набора соответствующих свойств объектов. Допустимые значения могут быть любыми из следующих: Описания каждой функции см. на странице справки transition-timing-function.

  • cubic-bezier(x1,y1,x2,y2)  Четыре параметра этой функции должны представлять собой значения с плавающей запятой в интервале от 0 до 1 включительно. Значения соответствуют координатам x и y точек P1 и P2 кривой Безье третьего порядка. Для свойств, отличающихся от opacity и color, функция cubic-bezier принимает координаты y, находящиеся вне стандартного диапазона между 0 и 1. Это позволяет создавать эффекты "эластичных" или "отскакивающих" переходов.
  • ease  Это значение используется по умолчанию. Указанная функция синхронизации вначале постепенно увеличивает скорость, затем выполняется с полной скоростью и плавно снижает ее к концу.
  • linear  У этой функции синхронизации скорость не изменяется.
  • ease-in  Эта функция синхронизации плавно увеличивает скорость в начале.
  • ease-out  Эта функция синхронизации плавно снижает скорость в конце.
  • ease-in-out  Эта функция синхронизации вначале постепенно увеличивает скорость, а затем плавно снижает ее к концу выполнения.
  • steps  Эта функция синхронизации определяет ступенчатую функцию синхронизации и принимает два параметра. Первый параметр обозначает количество интервалов, второй необязательный параметр указывает точку интервала, где изменяется значение параметра. Второй параметр ограничен значениями start или (по умолчанию) end.

 

Свойство transition-delay

Свойство transition-delay позволяет вам отложить начало перехода или сделать вид, что переход уже выполняется. Если свойство transition-delay принимает отрицательное значение, переход выполняется сразу после применения, но отображается так, как если бы он начался с указанным смещением, то есть внутри цикла воспроизведения.

СвойствоОписание

transition-delay

Задает одно или несколько разделенных запятыми значений смещения в переходе (время от начала перехода), прежде чем переход будет отображен для набора соответствующих свойств объектов. Каждое значение представляется в виде десятичного числа с плавающей запятой, за которым следует обозначение единицы времени (мс или с).

 

Свойство transition

Собирательное свойство transition объединяет четыре свойства переходов, описанные выше, в одно.

СвойствоОписание

transition

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

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

 

Пример

Переходы CSS3 в действии см. на странице Практикум: переходы веб-сайта Тестовый выпуск браузера Internet Explorer.

В следующем простом примере показано, как использовать переходы CSS3, чтобы изменять одно свойство CSS, применяемое к элементу div со временем.

Сначала мы создадим элемент div, у которого есть текст, и применим к нему некоторые стили:


<!DOCTYPE html>
<html lang="en-us">

<head>
<style type="text/css">
body {
  padding: 10px;
  font: bold 20pt "Segoe UI";
}
div {
  width: 250px;
  background-color: lime;
  padding: 10px;
}
</style>
</head>

<body>

<div>
  Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor.
  Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.</div>

</body>

</html>


Просмотрите эту страницу.

Сделаем так, чтобы объект div медленно исчезал через некоторое время, изменяя свойство opacity, когда пользователь щелкает и удерживает (или касается и удерживает) объект div. Сначала мы зададим для свойства непрозрачности значения "до" и "после". Мы придадим объекту div непрозрачность, равную "1" для начала, и "0", когда объект div будет "активен". Чтобы выполнить это, мы добавим свойства непрозрачности так, чтобы раздел стиля выглядел следующим образом:


...
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI"; 
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
  opacity:1;
}
div:active {
  opacity:0;
}
</style>
...


Если теперь щелкнуть и удерживать (или нажать и удерживать) зеленый div, он немедленно исчезнет на то время, пока будет удерживаться кнопка мыши (или палец). Просмотрите эту страницу.

Теперь мы можем добавить свойства перехода CSS, чтобы непрозрачность постепенно уменьшалась. Сначала мы идентифицируем свойство для перехода, используя свойство transition-property:


transition-property: opacity;

Затем мы добавим длительность перехода с помощью свойства transition-duration:


transition-duration: 5s;

Теперь определим функцию синхронизации, которая будет использоваться вместе со свойством transition-timing-function. Чтобы плавно выполнить переход div, мы воспользуемся линейной функцией синхронизации:


transition-timing-function: linear;

Мы также можем отложить переход на секунду с помощью свойства transition-delay:


transition-delay: 1s;

В результате применения этих четырех свойств свойство opacity совершит плавный переход в течение 5 секунд после секундного ожидания. Вы можете также использовать собирательное свойство перехода для объединения четырех свойств:


transition: opacity 5s linear 1s;

Просмотрите эту страницу.

Для переноса нескольких свойств элемента задайте несколько значений для свойств перехода, разделив их запятыми. Например, к нашему предыдущему примеру можно добавить изменение цвета. Сначала добавьте свойство background-color к селектору div :active. Затем измените свойство transition следующим образом:


transition: opacity 5s linear 1s, background-color 2s ease;

Это свойство добавляет переход к фиолетовому цвету в течение двух секунд с помощью простой функции синхронизации. Значения задержки здесь нет, поэтому переход начнется без промедления. Просмотрите эту страницу.

События переходов DOM

Internet Explorer 10 и приложения Магазина Windows на JavaScript определяют два события перехода:

transitionstart

Событие transitionstart возникает в начале перехода.

transitionend

Событие transitionend возникает при завершении перехода. Если переход удален до выполнения, это событие не запускается.

В этом примере применяются переходы к элементу <div> и запускаются события transitionstart и transitionend, чтобы изменить текст в прямоугольнике. Попробуйте пример в Интернете.


<!DOCTYPE html>
<html>

<head>
<title>CSS Transitions Event Example</title>
<style media="screen" type="text/css">
#animatedDiv {
    opacity: 0.5;
    background-color: #D2D2D2;
    color: black;
  width:100px;
  height:100px;
}
#animatedDiv:hover {
    opacity: 1;
    background-color: #F472D0;
    transform: rotate(45deg) translateX(200px);
    transition: all 5s linear 1s;
}
  #Figure {
  border: solid 1px black;
  }
</style>
</head>

<body>

<h1 id="DemoTitle">CSS transition events example</h1>
  <p>Hover your mouse over the inner box</p>
<div class="FigureContainer Bordered">
    <div id="Figure" style="width: 330px; height: 300px;">
        <div id="animatedDiv" aria-haspopup="true">
            Transitioned Element</div>
    </div>
</div>

    <script>
      var divObj = document.getElementById("animatedDiv");
      divObj.addEventListener("transitionstart", function () {
        this.innerHTML = "This is a transition start event";
      }, false);
      divObj.addEventListener("transitionend", function () {
        this.innerHTML = "This is a transition end event";
      }, false);

    </script>

</body>

</html>


Справочник по API

Transitions

Примеры и учебники

Модернизация веб-страницы с помощью преобразований, переходов и анимаций CSS

Демонстрации тестового выпуска Internet Explorer

Практикум: переходы
Трехмерные преобразования CSS3 в Internet Explorer 10
Модернизация страниц с помощью преобразований и анимаций CSS

Записи блога IEBlog

Полностраничные анимации с использованием CSS
Добавление индивидуальных особенностей с помощью переходов и анимаций CSS3

Спецификация

Переходы CSS

Связанные разделы

Создание привлекательных приложений с помощью переходов CSS3

 

 

Показ:
© 2015 Microsoft