Как добавить эффект перехода аккордеону на чистом CSS3.
Всем привет! Недавно я писал статью про то, как сделать аккордеон на чистом 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, чтобы в таких случаях появлялась полоса прокрутки.
Спасибо за внимание и удачи!
-
Создано 20.09.2014 20:27:43
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.