Як додати ефект переходу акордеону на чистому css3.

Відео: CSS Анімація за 6 хвилин. Animation при наведенні в CSS3 / HTML

Відео: дія ДЛЯ МОНТАЖУ (ДИМ) # 1

Всім привіт! Нещодавно я писав статтю про те, як зробити акордеон на чистому CSS3. Сьогодні ми його трохи покращимо, додавши ефект переходу.

Якщо ви, раптом, не читали цю статтю, то ви можете почитати її тут.

Давайте трохи змінимо стилі

.accordion-content { 
 padding:0- 
 height:0- 
 overflow: hidden- 
 transition: height 400ms ease- 
} 
 
.accordion-conent:target { 
 height:150px- 
 padding:20px- 
 overflow-y: scroll- 
}

Ось так просто ми можемо зробити наш акордеон красивішим і ефектним, однак тут є один мінус. Оскільки ми задаємо анімацію переходу нашої висоті, то ми повинні виставити фіксоване значення, отже, якщо тексту буде занадто багато, то він просто не влізе, тому ми виставили overflow-y = scroll, щоб в таких випадках з`являлася смуга прокрутки.