Переход между открытым элементом закрытия в деталях

Ответ 1

Нет, не в настоящее время. Да, но только если вы знаете height или можете анимировать font-size.

Первоначально это было не так. Из http://html5doctor.com/the-details-and-summary-elements/, "... если вы могли бы использовать переходы CSS для анимирования открытия и закрытия, но мы пока не можем." (Рядом с комментарием HTML5 есть комментарий, но, похоже, для принудительной анимации CSS требуется JS.)

Можно было использовать разные стили, основываясь на том, открыт ли он или закрыт, но переходы не выполнялись нормально. Однако сегодня переходы действительно работают, если вы знаете height или можете анимировать font-size. Подробнее см. http://codepen.io/morewry/pen/gbJvy.

Это было решение 2013 года, которое подделывает его:

CSS (может потребоваться добавить префиксы)

/* http://daneden.me/animate/ */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-1.25em);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.details-animated[open] {
    animation-name: fadeInDown;
    animation-duration: 0.5s;
}

HTML

<details class="details-animated">
    <summary>CSS Animation - Summary</summary>
    Try using [Dan Eden fadeInDown][1] to maybe fake it a little.  Yay, some animation.
</details>

Это работает сегодня:

CSS (может потребоваться добавить префиксы)

.details-animated {
  transition: height 1s ease;
}
.details-animated:not([open]) { height: 1.25em; }
.details-animated[open] { height: 3.75em; }

PS: Проверяется только в Chrome. Слушать FF по-прежнему не поддерживает details в целом. IE и Edge по-прежнему не поддерживают details.

(Вы можете использовать анимацию или переходы в ключевой кадре, чтобы делать всевозможные другие анимации для открытия. Я выбрал fadeInDown только для иллюстрации. Это разумный выбор, который даст аналогичное ощущение, если вы не можете добавить дополнительная разметка или не будет знать высоту содержимого. Однако ваши варианты не ограничиваются этим: см. комментарии к этому ответу, которые включают две альтернативы, включая подход font-size.)

Ответ 2

Учитывая, что высота должна защелкнуться в какой-то момент, я предпочитаю начать анимировать высоту, а затем щелкнуть. Если вам повезет, что все элементы имеют такую ​​же высоту, это решение может быть весьма эффективным. (вам нужен div внутри ваших элементов данных, хотя)

@keyframes slideDown {
    0% {
        opacity: 0;
        height: 0;
    }
    100% {
        opacity: 1;
        height: 20px; /* height of your smallest content, e.g. one line */
    }
}
details {
    max-width:400px;
}
details[open]>div {
    animation-name: slideDown;
    animation-duration: 200ms;
    animation-timing-function:ease-in;
    overflow:hidden;
}

см. http://dabblet.com/gist/5866920 например

Ответ 3

Мой короткий ответ: вы не можете переходить между резюме и остальным содержимым деталей.

НО!

Вы можете сделать приятный переход внутри сводки между селектором details и подробностями [открыть]

details{
  position: relative;
  width: 100px;height: 100px;
  perspective: 1000px;
}
div{
  position: absolute;
  top: 20px;
  width: 100px;height: 100px;
  background: black;
}
details .transition{
  transition: 1s linear;
  transform-origin: right top;
  ;
}
details[open] .transition{
  transform: rotateY(180deg);
  background: orangered;
}

<details>
  <summary>
    <div></div>
    <div class="transition"></div>
  </summary>
</details>

Ответ 4

Конечно, возможно:

<style type="text/css">    
    DETAILS[open] SUMMARY ~ * {
        animation: sweep .5s ease-in-out;
    }
    @keyframes sweep {
        0%    {opacity: 0; margin-left: -10px}
        100%  {opacity: 1; margin-left: 0px}
    }
</style>