Можно ли как-то сделать плавное закрытие тега details

Question

Открыл для себя недавно details, очень удобный тег, чтобы делать аккордеоны, но никак не смог добиться от него плавного закрытия контента. Хотел узнать, может кто смог реализовать плавное закрытие, а то резкое исчезновение контента очень плохо смотрится. Спасибо за внимание.

Answer 1

Например вот так можно

details[open] {
  animation: slide .3s ease-in-out;
}

@keyframes slide {
  0%    { opacity: 0; transform:  translate(0, -10px); }
  100%  { opacity: 1; transform:  translate(0, 0); }
}

Answer 2

Следующий код будет работать при открытии к сожалению я не смог сделать так чтобы после закрытия но можно сделать используя WAAPI

details[open] summary + * {
  animation: slide .3s ease-in-out;
}

@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

Answer 3

Только кастом. Учти, что max-height должно обязательно указываться в px и должно быть больше, чем размер span, наполненный текстом.

.details{
    display: grid;
    grid-template-columns: 0 1fr;
    grid-template-areas:
            "cb lb"
            "spn spn";
    border: 1px solid black;
    transition: max-height 0.7s ease-in-out;
    gap:0;

    /*украшательства*/
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.details > input{
    appearance: none;
    width: 0;
    height: 0;
    grid-area: cb;
}

.details > label:before{
    content: '→';
    display: flex;
    width: max-content;
    margin-right: 5px;
    rotate: 0deg;
    transition: rotate 0.5s ease-in-out;
}

.details > label{
    display: flex;
    width: max-content;
    grid-area: lb;
}

.details > span{
    overflow: hidden;
    background-color: lightgray;
    max-height: 0;
    grid-area: spn;
    transition: max-height 0.7s ease-in-out;
}

.details > input:checked ~ span{
    max-height: 160px;
}

.details > input:checked + label:before{
    rotate: 90deg;
    transition: rotate 0.7s ease-in-out;
}

<div class="details">
    <input type="checkbox" id="open">
    <label for="open">Открыл для себя недавно details</label>
    <span>
      Очень удобный тег, чтобы делать аккордеоны, 
      но никак не смог добиться от него плавного
      закрытия контента.
    </span>
</div>

БЛОГ НА HUSL

Можно ли как-то сделать плавное закрытие тега details

Ответы (3 шт):