Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Transition html: transition-delay | htmlbook.ru

Содержание

transition-delay | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
10.0+ 1.0+ 26.0+ 11.6+ 12.10+ 3.0+ 4.0+ 16.0+ 2.1 2.0+

Краткая информация

Значение по умолчанию 0s
Наследуется Нет
Применяется Ко всем элементам, к псевдоэлементам ::before и ::after
Процентная запись Неприменима
Ссылка на спецификацию http://dev.w3.org/csswg/css-transitions/#transition-delay

Версии CSS

Описание

Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property.

Синтаксис

transition-delay: <время> [,<время>]*

Значения

См. время.

Пример

HTML5CSS3IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transition-delay</title>
  <style>
   #bar {
    top:-5.5em; right:5em; /* Положение */
     padding: .5em; /* Поля */
     margin: 0; /* Отступы */
     position: absolute; /* Абсолютное позиционирование */
     width: 2em; /* Ширина */
     background: #333; /* Цвет фона */
     color: #fff; /* Цвет текста */
     text-align: center; /* Выравнивание по центру */
     /* Анимация */
     -webkit-transition: .4s ease-out;
     -webkit-transition-delay: 0.5s;
     -o-transition: .4s ease-out;
     -o-transition-delay: 0.5s;
     -moz-transition: .4s ease-out;
     -moz-transition-delay: 0.5s;
     transition: .4s ease-out;
     transition-delay: 0.5s;
    }
   #bar:hover { top: 0; }
  </style>
 </head>
 <body>
  <ul>
   <li>1</li><li>2</li>
   <li>3</li><li>4</li>
   <li>&darr;</li>
  </ul>
 </body>
</html>

В данном примере при наведении курсора на стрелку, раскрывается блок с числами.

Объектная модель

[window.]document.getElementById(«elementID»).style.transitionDelay

Браузеры

Chrome до версии 26.0, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transition-delay.

Opera до версии 12.10 поддерживает нестандартное свойство -o-transition-delay.

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transition-delay.

property | HTML и CSS с примерами кода

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

Переходы и Анимации

Синтаксис

/* Keyword values */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property: all, -moz-specific, sliding;

/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: unset;

Значения

none
Никакое свойство не задано.
all
Все свойства будут отслеживаться.
<свойство>
Название стилевого свойства, регистр при его написании не учитывается. При указании нескольких свойств они перечисляются друг за другом через запятую.

Примечание

  • Chrome до версии 26.0, Safari до версии 6.1 и Android поддерживают свойство -webkit-transition-property.
  • Opera до версии 12.10 поддерживает свойство -o-transition-property.
  • Firefox до версии 16 поддерживает свойство -moz-transition-property.

Значение по-умолчанию: all

Применяется ко всем элементам, к псевдоэлементам ::before и ::after

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

Поддержка браузерами

Can I Use css-transitions? Data on support for the css-transitions feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>transition-duration</title>
    <style>
      body {
        margin: 0;
      }
      .menu {
        position: absolute;
        height: 100px;
        width: 100%;
        background: #fc0;
        border-bottom: 20px solid #333;
        top: -100px;
        /* Анимация */
        transition-property: top;
        transition-duration: 2s;
      }
      .menu:hover {
        top: 0;
      }
    </style>
  </head>
  <body>
    <div>
      А здесь у нас будет своё меню с преферансом и
      профурсетками.
    </div>
  </body>
</html>

CSS transition

Пример

Наведите курсор на элемент <div>, чтобы постепенно изменить ширину от 100px до 300px:

div
{
   
width: 100px;
   
transition: width 2s;
}

div:hover {
    width: 300px;
}

Подробнее примеры ниже.


Определение и использование

Свойство transition является сокращенным свойством для четырех свойств перехода:

Примечание: Всегда указывайте свойство transition-duration, в противном случае длительность — 0, а переход не будет иметь эффекта.

Значение по умолчанию: all 0s ease 0s
Inherited: no
Animatable: no. Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.transition=»all 2s»


Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Номера следуют -WebKit-, -МОЗ- или -o- укажат первую версию, которая работала с префиксом.

Свойство
transition 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-


Синтаксис CSS

transition: property duration timing-function delay|initial|inherit;

Значения свойств

Значение Описание
transition-property Задает имя свойства CSS, для которого используется эффект перехода
transition-duration Указывает, сколько секунд или миллисекунд потребуется для выполнения эффекта перехода
transition-timing-function Определяет кривую скорости эффекта перехода
transition-delay Определяет, когда начнется эффект перехода
initial Присваивает этому свойству значение по умолчанию. (Читайте о initial)
inherit Наследует это свойство из родительского элемента. (Читайте о inherit)

Другие примеры

Пример

Когда < входной тип = «Text» > получает фокус, постепенно измените ширину с 100px на 250пкс:

input[type=text] {
    width: 100px;
    transition: width .35s ease-in-out;
}

input[type=text]:focus {
    width: 250px;
}


Похожие страницы

CSS Справочник: CSS Transitions

HTML DOM Справочник: transition Свойство

transition | CSS | WebReference

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

Краткая информация

Значение по умолчанию all 0s ease 0s
Наследуется Нет
Применяется Ко всем элементам, к псевдоэлементам ::before и ::after
Анимируется Нет

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

none
Отменяет эффект перехода.

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>transition</title>
<style>
#bar {
top:-5.5em; right:5em; /* Положение */
padding: .5em; /* Поля */
margin: 0; /* Отступы */
position: absolute; /* Абсолютное позиционирование */
width: 2em; /* Ширина */
background: #333; /* Цвет фона */
color: #fff; /* Цвет текста */
text-align: center; /* Выравнивание по центру */
/* Переход */
transition: top 1s ease-out 0.5s;
}
#bar:hover { top: 0; }
</style>
</head>
<body>
<ul>
<li>1</li><li>2</li>
<li>3</li><li>4</li>
<li>&darr;</li>
</ul>
</body>
</html>

В данном примере при наведении курсора на стрелку раскрывается блок с числами.

Объектная модель

Объект.style.transition

Примечание

Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают свойство -webkit-transition.

Opera до версии 12.10 поддерживает свойство -o-transition.

Firefox до версии 16 поддерживает свойство -moz-transition.

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

Спецификация Статус
CSS Transitions Рабочий проект

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

10 12 1 26 11.6 12.10 3 6.1 4 16
2.1 4.4 4 16 10 12.10 3.2

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  •  — свойство браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.08.2017

Редакторы: Влад Мержевич

transition | Справочник CSS | schoolsw3.com

Пример

Наведите указатель мыши на элемент <div>, чтобы постепенно изменить ширину от 100px до 300px:

div
{
  width: 100px;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

Редактор кода »


Определение и использование

Свойство transition — это сокращенное свойство для:

Примечание: Всегда указывайте свойство transition-duration, в противном случае длительность равна 0s, и переход не будет иметь никакого эффекта.


Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа, за которыми следует -webkit-, -moz- или -o- указывают первую версию, которая работала с префиксом.

Свойство
transition 26.0
4.0 -webkit-
10.0 16.0
4.0 -moz-
6.1
3.1 -webkit-
12.1
10.5 -o-


CSS Синтаксис

transition: property duration timing-function delay|initial|inherit;

Значение свойств

Значение Описание
transition-property Задает имя свойства CSS, для которого предназначен эффект перехода
transition-duration Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода
transition-timing-function Задает кривую скорости эффекта перехода
transition-delay Определяет, когда начнется эффект перехода
initial Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial
inherit Наследует это свойство от родительского элемента. Прочитайте о inherit

Примеры

Пример

Когда <input type=»text»> получает фокус, постепенно изменится ширина от 100px до 250px:

input[type=text] {
  width: 100px;
  transition: width .35s ease-in-out;
}

input[type=text]:focus {
  width: 250px;
}

Редактор кода »


Связанные страницы

CSS Учебник: CSS Переходы

HTML DOM Справочник: Свойство transition

CSS свойство transition | назначение, допустимые значения, примеры

Свойство transition — сокращенный способ задать свойства перехода transition-property, transition-duration, transition-timing-function и transition-delay, позволяет одновременно задать свойство, к изменению которого будет применен плавный переход, время, в течение которого этот переход будет совершаться, способ расчета промежуточных значений перехода и задержку перед переходом.

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

Допустимые значения

Значение по умолчанию не определяется для составных свойств
Применимо ко всем элементам, псевдоэлементам :before и :after
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами

Пример


div {
background-color:#ccc;
transition:background-color 5s ease-in-out 2s;
}

Твой код:

<html>
<head>
<title></title>
<style type=»text/css»>
<!—
div {
background-color:#0f0;
color:#f00;
transition:background-color 5s ease-in 3s, color 3s ease-out 1s;
}
div:hover{
background-color:#f00;
color:#0f0;
}
—>
</style>
</head>
<body>
<p>На момент выхода статьи это свойство не поддерживается ни одним из распространенных браузеров</p>
<div>
Этот блок при наведении мышью меняет цвет плавно (если браузер поддерживает плавные переходы) или мгновенно (если не поддерживает).
</div>
</body>
</html>Сделай код и жми тут

Результат:

большой полигон

Заметки

Это свойство относится к модулю CSS Transitions Module Level 3 находящемся в разработке W3C, поэтому в нем возможны дополнения.

Safari 3.1 и выше Chrome 1 и выше поддерживают аналогичное свойство -webkit-transition.

Opera 10.5 и выше поддерживает аналогичное свойство -o-transition но только для блочных и строчных элементов.

Разработчики Firefox заявляют поддержку аналогичного свойства -moz-transition с выходом Firefox 4.0.

Свойство transition-delay

Свойство transform-style

Задачи на работу с плавными переходами transition на CSS

Перед решением задач изучите теорию к данному уроку.

Задачи для решения

Основы

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Задержка

Повторите страницу по данному по образцу (наведите мышкой на элемент и подержите ее 3 секунды):

Вы можете открыть этот пример в отдельной вкладке браузера.

Инпут в фокусе

Для решения задач данного блока вам понадобится следующий псевдокласс:
focus.

Повторите страницу по данному по образцу (поставьте курсор в инпут и повторите
его поведение):

Вы можете открыть этот пример в отдельной вкладке браузера.

Транзишн и продвинутые селекторы

Повторите страницу по данному по образцу (при наведении на зеленый блок,
все красный блоки плавно увеличат свою ширину):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на один из красных блоков):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на один из красных блоков):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на один из красных блоков):

Вы можете открыть этот пример в отдельной вкладке браузера.

Подсказка

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Пошаговые полоски

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Кривые Безье

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Индикатор

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышкой на блок):

Вы можете открыть этот пример в отдельной вкладке браузера.

Анимированные тени

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Выпадающая менюшка

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Свойство перехода CSS

Пример

Наведите указатель мыши на элемент

, чтобы постепенно изменить ширину со 100 пикселей на
300 пикселей:

div
{
ширина: 100 пикселей;
переход: ширина 2с;
}

div: hover {
width: 300px;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.


Определение и использование

Свойство перехода является сокращенным свойством для:

Примечание: Всегда указывайте свойство transition-duration, иначе длительность
равно 0 с, и переход не будет иметь никакого эффекта.

Значение по умолчанию: все 0 с легкостью 0 с
Унаследовано: нет
Анимируемое: нет. Прочитать о animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.transition = «all 2s»
Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следуют -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.

Объект
переход 26,0
4,0 -webkit-
10,0 16,0
4,0 -моз-
6,1
3,1 -webkit-
12,1
10,5 -о-


Синтаксис CSS

переход: свойство длительность временная функция задержки | начальный | наследование;

Значения собственности


Другие примеры

Пример

Когда получает фокус, постепенно изменяйте ширину со 100 пикселей на
250 пикселей:

input [type = text] {
width: 100 пикселей;
переход: ширина.Легкость входа-выхода 35s;
}

input [type = text]: focus {
width: 250px;
}

Попробуй сам »


связанные страницы

Учебник

CSS: переходы CSS

Ссылка на HTML DOM: свойство перехода

transition-duration — CSS: Cascading Style Sheets

Свойство CSS transition-duration задает продолжительность анимации перехода, которая должна длиться до завершения. По умолчанию значение 0 с , что означает, что анимация не выполняется.

Вы можете указать несколько длительностей; каждая длительность будет применяться к соответствующему свойству, как определено свойством transition-property , которое действует как главный список. Если указано меньше длительностей, чем в главном списке, пользовательский агент повторяет список длительностей. Если длительностей больше, список обрезается до нужного размера. В обоих случаях объявление CSS остается действительным.

 
продолжительность перехода: 6 с;
продолжительность перехода: 120 мс;
продолжительность перехода: 1 с, 15 с;
продолжительность перехода: 10 с, 30 с, 230 мс;


продолжительность перехода: наследование;
продолжительность перехода: начальная;
продолжительность перехода: вернуться;
продолжительность перехода: не задано;
  

Значения

<время>

— это <время> , обозначающее количество времени, которое должен занять переход от старого значения свойства к новому значению.Время 0 с указывает, что перехода не произойдет, то есть переключение между двумя состояниями будет мгновенным. Отрицательное значение времени делает объявление недействительным.

Пример, показывающий разную продолжительность

HTML
  
0,5 секунды
2 секунды
4 секунды
CSS
  .box {
  маржа: 20 пикселей;
  отступ: 10 пикселей;
  дисплей: встроенный блок;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  цвет фона: красный;
  размер шрифта: 18 пикселей;
  свойство перехода: цвет фона размер шрифта; цвет преобразования;
  временная функция перехода: легкость входа-выхода;
}

.transformed-state {
  преобразовать: повернуть (270 градусов);
  цвет фона: синий;
  цвет: желтый;
  размер шрифта: 12 пикселей;
  свойство перехода: цвет фона размер шрифта; цвет преобразования;
  временная функция перехода: легкость входа-выхода;
}

.duration-1 {
  продолжительность перехода: 0,5 с;
}

.duration-2 {
  продолжительность перехода: 2 с;
}

.duration-3 {
  продолжительность перехода: 4 с;
}
  
JavaScript
  function change () {
  const elements = document.querySelectorAll ("div.box");
  for (let element of elements) {
    элемент.classList.toggle ("преобразованное состояние");
  }
}

const changeButton = document.querySelector ("# изменение");
changeButton.addEventListener («щелкнуть», изменить);
  
Результат

Таблицы BCD загружаются только в браузере

Переход

— CSS: Каскадные таблицы стилей

Это свойство является сокращением для следующих свойств CSS:

 

переход: маржа-право 4с;


переход: margin-right 4s 1s;


переход: маржа-право 4s легкость входа-выхода;


переход: маржа-вправо 4 с легкость входа-выхода 1 с;


переход: край-правый 4s, цвет 1s;


переход: все 0.5s легкость выхода;


переход: наследование;
переход: начальный;
переход: вернуться;
переход: не установлен;
  

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

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

  • ноль или одно значение, представляющее свойство, к которому должен применяться переход.Это может быть любое из:
    • ключевое слово нет
    • ключевое слово все
    • a именование свойства CSS.
  • ноль или одно значение , представляющее функцию ослабления для использования
  • ноль, один или два <время> значений. Первое значение, которое может быть проанализировано как время, назначается для длительности перехода , а второе значение, которое может анализироваться как время, назначается для задержки перехода .

Посмотрите, как поступают, когда списки значений свойств не одинаковой длины. Короче говоря, дополнительные описания переходов, превышающие количество фактически анимируемых свойств, игнорируются.

Простой пример

В этом примере выполняется четырехсекундный переход размера шрифта с задержкой в ​​одну секунду, когда пользователь наводит курсор на элемент.

HTML
   Наведите курсор на меня 
  
CSS
  .target {
  размер шрифта: 14 пикселей;
  переход: font-size 4s 1s;
}

.target: hover {
  размер шрифта: 36 пикселей;
}
  

Есть еще несколько примеров переходов CSS, включенных в статью Использование переходов CSS.

Таблицы BCD загружаются только в браузере

Свойство перехода CSS

Свойство CSS перехода является сокращенным свойством для следующих свойств:

Свойство перехода является одним из свойств CSS3.

Сначала следует указать продолжительность перехода, потому что по умолчанию она равна 0 с, и свойство не будет иметь эффекта.

Свойства разделены запятыми.

Если указано более одного перехода, и любой из переходов имеет «none» в качестве свойства перехода, то объявление недействительно.

Свойства перехода позволяют указать переход между двумя состояниями элемента. Различные состояния могут быть определены с помощью псевдоклассов, таких как: hover или: active, или с помощью JavaScript.

Для максимальной совместимости с браузерами с этим свойством используются расширения, такие как -webkit- для Safari, Google Chrome и Opera (более новые версии), -moz- для Firefox, -o- для более старых версий Opera.

Синтаксис¶

  переход: свойство-перехода | продолжительность перехода | временная функция перехода | переход-задержка | начальная | наследовать;  

Пример свойства перехода с псевдоклассом: active: ¶

  

  
     Название документа 
    <стиль>
      div {
        ширина: 150 пикселей;
        высота: 100 пикселей;
        фон: # 8ebf42;
        -webkit-transition: ширина 2 с;
        -моз-переход: ширина 2с;
        -о-переход: ширина 2с;
        переход: ширина 2с;
      }
      div: active {
        ширина: 600 пикселей;
      }
    
  
  
    

Пример свойства перехода

Щелкните и удерживайте, чтобы увидеть эффект перехода.

Попробуйте сами »

Пример свойства перехода с псевдоклассом: hover: ¶

  

  
     Название документа 
    <стиль>
      тело {
        цвет фона: #fff;
        цвет: # 000;
        размер шрифта: 1em;
        семейство шрифтов: «Робото», Helvetica, без засечек;
      }
      .element {
        отступ: 20 пикселей;
        ширина: 50 пикселей;
        высота: 50 пикселей;
        слева: 0;
        цвет фона: # 8ebf42;
        положение: относительное;
        -webkit-transition: левая 1 с легкость выхода, цвет фона 1 с легкость выхода 1;
        -moz-transition: левый 1s для выхода, background-color 1s, для выхода 1s;
        -o-transition: левая единица-выход, цвет фона 1-й, выход 1с;
        переход: левая единица - выход, фоновый цвет - единицы, выход - единицы;
      }
      .пример: hover .element {
        слева: 400 пикселей;
        цвет фона: # 1c87c9;
      }
      .element-2 {
        -webkit-transition: нет;
        -moz-transition: нет;
        -o-переход: нет;
        переход: нет;
      }
    
  
  
    

Пример свойства перехода

Наведите указатель мыши на контейнер, чтобы увидеть эффект перехода.

Без перехода:

Попробуйте сами »Значения

CSS transition-duration Свойство

Пример

Пусть эффект перехода
длится 5 секунд:

div {
продолжительность перехода: 5 с;
}

Попробуй сам »


Определение и использование

Свойство transition-duration указывает, сколько секунд или миллисекунд
(мс) а
Эффект перехода продолжается.

Значение по умолчанию: 0 с
Унаследовано: нет
Анимируемое: нет. Прочитать о animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.transitionDuration = «1s»
Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следуют -webkit-, -moz- или -o-, указывают первую версию, которая работала с префиксом.

Объект
продолжительность перехода 26,0
4,0 -webkit-
10,0 16,0
4,0 -моз-
6,1
3,1 -webkit-
12,1
10,5 -о-

Синтаксис CSS

продолжительность перехода: время | начальное | наследование;

Значения собственности

Значение Описание
время Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода.Значение по умолчанию — 0 с, что означает отсутствие эффекта
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальные
наследовать Наследует это свойство от своего родительского элемента. Читать про наследство

связанные страницы

Учебник

CSS: переходы CSS

Ссылка на HTML DOM: свойство transitionDuration

Надстройки анимации

— React

Примечание:

ReactTransitionGroup и ReactCSSTransitionGroup были перемещены в пакет react-transition-group , который поддерживается сообществом.Его ветка 1.x полностью API-совместима с существующими надстройками. Пожалуйста, отправляйте сообщения об ошибках и запросы функций в новый репозиторий.

Дополнительный компонент ReactTransitionGroup — это низкоуровневый API для анимации, а ReactCSSTransitionGroup — дополнительный компонент для простой реализации базовой CSS-анимации и переходов.

API высокого уровня: ReactCSSTransitionGroup

ReactCSSTransitionGroup — это высокоуровневый API, основанный на ReactTransitionGroup и простой способ выполнять переходы и анимацию CSS, когда компонент React входит или покидает DOM.Он вдохновлен превосходной библиотекой ng-animate.

Импорт

  импортировать ReactCSSTransitionGroup из «реакции-переход-группа»;
var ReactCSSTransitionGroup = require ('реагировать-переход-группа');  
  class TodoList расширяет React.Component {
  конструктор (реквизит) {
    супер (реквизит);
    this.state = {items: ['привет', 'мир', 'клик', 'я']};
    this.handleAdd = this.handleAdd.bind (это);
  }

  handleAdd () {
    const newItems = this.state.items.concat ([
      подсказка ('Введите текст')
    ]);
    this.setState ({items: newItems});
  }

  handleRemove (i) {
    пусть newItems = this.state.items.slice ();
    newItems.splice (я, 1);
    this.setState ({items: newItems});
  }

  оказывать() {
    const items = this.state.items.map ((item, i) => (
      
this.handleRemove (i)}> {элемент}
)); возвращение (
{items}
); } }

Примечание:

Вы должны предоставить атрибут key для всех дочерних элементов ReactCSSTransitionGroup , даже при визуализации только одного элемента.Таким образом React будет определять, какие дети вошли, ушли или остались.

В этом компоненте, когда новый элемент добавляется в ReactCSSTransitionGroup , он получит CSS-класс example-enter и example-enter-active CSS class, добавленные в следующем тике. Это соглашение, основанное на опоре transitionName .

Эти классы можно использовать для запуска CSS-анимации или перехода. Например, попробуйте добавить этот CSS и добавить новый элемент списка:

 .example-enter {
  непрозрачность: 0,01;
}

.example-enter.example-enter-active {
  непрозрачность: 1;
  переход: непрозрачность 500 мс замедление;
}

.example-leave {
  непрозрачность: 1;
}

.example-leave.example-leave-active {
  непрозрачность: 0,01;
  переход: непрозрачность 300 мс замедление;
}  

Вы заметите, что продолжительность анимации должна быть указана как в CSS, так и в методе рендеринга; это сообщает React, когда нужно удалить классы анимации из элемента и — если он уходит — когда удалять элемент из DOM.

Анимация начального монтажа

ReactCSSTransitionGroup предоставляет дополнительную опору prop transitionAppear , чтобы добавить дополнительную фазу перехода при начальном монтаже компонента. Как правило, при начальной установке отсутствует переходная фаза, поскольку значение по умолчанию transitionAppear false . Ниже приведен пример, который передает свойство prop transitionAppear со значением true .

  render () {
  возвращение (
    
      

Затухание при первоначальном подключении

); }

Во время начального монтирования ReactCSSTransitionGroup получит CSS-класс example-появляться и example-появляться-активный класс , добавленные в следующем тике.

  .example-появляться {
  непрозрачность: 0,01;
}

.example-появляться.example-появляться-active {
  непрозрачность: 1;
  переход: непрозрачность .5s легкость вставки;
}  

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

Примечание:

Опора transitionAppear была добавлена ​​в ReactCSSTransitionGroup в версии 0.13 . Для обеспечения обратной совместимости значение по умолчанию — false .

Однако значения по умолчанию transitionEnter и transitionLeave равны true , поэтому по умолчанию необходимо указать transitionEnterTimeout и transitionLeaveTimeout . Если вам не нужно вводить или закрывать анимацию, передайте transitionEnter = {false} или transitionLeave = {false} .

Пользовательские классы

Также можно использовать собственные имена классов для каждого шага в ваших переходах.Вместо передачи строки в transitionName вы можете передать объект, содержащий либо , введите и , оставьте имена классов , либо объект, содержащий , введите , введите активный , оставьте активным и оставьте имена классов. Если указаны только классы входа и выхода, классы enter-active и leave-active будут определяться добавлением ‘-active’ в конце имени класса. Вот два примера использования настраиваемых классов:

 

  {элемент}



  {item2}

  

Анимационная группа должна быть установлена ​​для работы

Чтобы применить переходы к своим дочерним элементам, ReactCSSTransitionGroup должна быть уже смонтирована в DOM или для свойства prop transitionAppear должно быть установлено значение true .

В приведенном ниже примере не будет работать с , потому что ReactCSSTransitionGroup монтируется вместе с новым элементом, а не внутри него. Сравните это с разделом «Начало работы» выше, чтобы увидеть разницу.

  render () {
  const items = this.state.items.map ((item, i) => (
    
this.handleRemove (i)}> {элемент}
)); возвращение (
{items}
); }

Анимация одного или нуля

В приведенном выше примере мы отрисовали список элементов в ReactCSSTransitionGroup . Однако дочерние элементы ReactCSSTransitionGroup также могут быть одним или нулевым элементом. Это позволяет анимировать вход или выход одного элемента. Точно так же вы можете анимировать новый элемент, заменяющий текущий элемент. Например, мы можем реализовать простую карусель изображений следующим образом:

  импортировать ReactCSSTransitionGroup из «реакции-переход-группа»;

function ImageCarousel (props) {
  возвращение (
    
); }

Отключение анимации

Вы можете отключить анимацию введите или оставьте анимацию , если хотите. Например, иногда вы можете захотеть, чтобы анимация вводила и не оставляла анимацию , но ReactCSSTransitionGroup ожидает завершения анимации перед удалением вашего узла DOM. Вы можете добавить свойства transitionEnter = {false} или transitionLeave = {false} к ReactCSSTransitionGroup , чтобы отключить эти анимации.

Примечание:

При использовании ReactCSSTransitionGroup ваши компоненты не могут получать уведомления о завершении перехода или выполнять более сложную логику вокруг анимации. Если вам нужен более детальный контроль, вы можете использовать API ReactTransitionGroup нижнего уровня, который предоставляет хуки, необходимые для пользовательских переходов.


API низкого уровня: ReactTransitionGroup

Импорт

  импортировать ReactTransitionGroup из 'react-addons-transition-group'
var ReactTransitionGroup = require ('react-addons-transition-group')  

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

Визуализация другого компонента

ReactTransitionGroup по умолчанию отображает диапазон . Вы можете изменить это поведение, предоставив опору компонента prop. Например, вот как вы визуализируете

    :

       {}
      

    Любые дополнительные, определяемые пользователем свойства станут свойствами визуализированного компонента.Например, вот как вы визуализируете