Последовательность в CSS Transition

407

06 марта 2017, 11:10

CSS Transitions это отличное средство, но добиться его гибкости порой непросто.

Например, есть HTML-элемент со значением прозрачности по умолчанию, что равно единице.

Назначаем ему transition-property: opacity и transition-duration: .5s На данном этапе, при любом изменении значения прозрачности (для примера, это событие :hover), переход будет происходить в течении 500 милисекунд, как мы и указали.

Но что если нужно моментально скрыть элемент, а потом плавно показать его?

.elem { 
  width:200px; 
  height:100px; 
  background:#333; 
  transition:opacity .5s; 
} 
.elem:hover { 
  opacity:0; 
}

<div id="elem" class="elem"></div>

Answer 1

Пока думал над логикой происходящего, ответ пришел сам, но всё же решил опубликовать, вдруг кому пригодится. Решение было в разделении свойств transition, что дает возможность гибко манипулировать ими (свойствами), например изменять только их в добавляемом классе (или псевдоклассе, как в примере).

.elem { 
  width:200px; 
  height:100px; 
  background:#333; 
  transition-property:opacity; 
  transition-duration:.5s; 
} 
.elem:hover { 
  transition-duration:0s; 
  opacity:0; 
}