Помните про "transition: all"

Часто, при исследовании кода CSS3, можно обнаружить строки, подобные нижеприведенному примеру (префиксы браузеров опущены для наглядности): 

Code
.element {
  width: 400px;
  height: 400px;
  transition: width 1s ease-in;
}

.element:hover {
  width: 500px;
}


В примере определяется высота и ширина элемента, а затем определяется инструкция для изменения ширины при наведении курсора мыши. В короткой записи свойства transition определяются свойства, которые будут трансформироваться.

Если в дальнейшем возникнет необходимость анимировать изменение и высоты и ширины, то придется изменить описание следующим образом:

Code
.element {
  width: 400px;
  height: 400px;
  transition: width 1s ease-in, height 1s ease-in;
}

.element:hover {
  width: 500px;
  height: 500px;
}


Свойство transition позволяет использовать описание изменения нескольких свойств, перечисленных через запятую. Но обычно используется одинаковая длительность и функция перехода, поэтому такая запись будет избыточна и ее лучше заменить следующим кодом:

Code
.element {
  width: 400px;
  height: 400px;
  transition: all 1s ease-in;
}

.element:hover {
  width: 500px;
  height: 500px;
}


Здесь используется ключевое слово all для определения того, что все свойства будут трансформироваться. В действительности ключевое слово "all” используется по умолчанию для свойства transition-property, так что можно еще более сократить запись:

Code
.element {
  width: 400px;
  height: 400px;
  transition: 1s ease-in;
}


Данный код будет производить те же действия - трансформация и высоты и ширины (и любого другого свойства, которое может быть добавлено позже). Интерсно, что для короткой записи требуется только указание длительности, так что можно оставить transition: 1s, и все должно работать также, за исключением использования функции "easy" по умолчанию для transition-timing-function.

Также следует упомянуть, что сейчас ведутся дискуссии по поводу замены значения по умолчанию с "all” на "none”.


Где может быть полезна данная техника?

Допустим, вы начали работу с трансформациями одного или нескольких свойств, но затем решили добавить другие в список трансформаций. Если параметры трансформации одинаковы для всех свойств (что имеет очень высокую вероятность), то будет проще использовать ключевое слово "all” в определении с самого начала, и не придется писать перечисление через запятую при дальнейшей модификации кода.

Но с одной оговоркой. Для всех свойств используются одинаковые временные функции и длительность трансформации.

  • FalleN

  • 799

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!