Как сделать плавное раскрытие раздвижных панелей в Oxygen?

Стандартный компонент "Toggle" (раздвижные панели) в Oxygen не имеет возможности настройки плавности раскрытия скрытого содержимого и при клике панель раскрывается мгновенно.

В зависимости от дизайна и концепции вашего сайта, иногда может потребоваться придать плавность открытию раздвижных панелей. При помощи небольшого css кода мы можем сделать это. Посмотреть пример можно ниже.

Шаг 1

Выделите контейнер, в котором размещается скрытый контент и назначьте ему дополнительный класс t-flow (см. скриншот ниже). Если у вас уже создано несколько панелей, то назначьте этот класс для контейнеров каждой раздвижной панели.

Добавление класса для контейнера скрытого контента

ВАЖНО: данный способ будет работать только в том случае, если блок скрываемого контента размещён ниже кнопки открытия панели (Toggle) и размещен в непосредственной близости с кнопкой. Пример необходимой структуры видно на скриншоте выше.

Шаг 2

Теперь необходимо добавить css код. Если эффект нужен вам только на этой странице, то добавьте на страницу стандартный элемент "Code Block" и в его секцию "Advanced > CSS" вставьте следующий код, после чего нажмите "Apply Code" и сохраните изменения на странице:

.t-flow {
   display: flex!important;
   height: auto;
   min-height: 0;
   max-height: 0;
   padding-top: 0;
   padding-bottom: 0;
   overflow: hidden;
   transition: max-height 0.7s ease-in-out, padding 0.7s ease-in-out;
}
.oxy-toggle[class*=expanded] + .t-flow {
    max-height: 100px;
    padding-top:20px;
    padding-bottom:20px;
}

Теперь скрытый контент будет открываться плавно. Вы можете изменить имя класса на своё усмотрение, а также, изменяя значения max-height, padding-top, padding-bottom и transition: max-height можете добиться желаемого результата. Например, чтобы сделать раскрытие ещё более плавным, установите  max-height 1.5s ease-in-out, padding 1.5s ease-in-out (длительность 1.5 секунды). Чем больше значение, тем плавнее раскрытие.

Если вы хотите иметь данный эффект плавного раскрытия панелей на всех страницах сайта, то css код требуется добавить не в Code Block, а в разделе Stylesheets настройках сайта в редакторе Oxygen. Как это делается, можно посмотреть в официальной документации. В ближайшее время переводы официальной документации будут появляться на нашем сайте.

Демо

Пример получившегося плавного эффекта при открытии:
Нажмите для проверки
This is a block of text. Double-click this text to edit it.
Пример стандартного эффекта с мгновенным раскрытием:
Нажмите для проверки
This is a block of text. Double-click this text to edit it.
Следите за выходом новых советов и уроков:
arrow-up