it-swarm.com.ru

Как добавить CSS3 переход с HTML5 подробности/итоговый тег раскрыть?

Используя только CSS3, есть ли способ добавить эффект плавного перехода и скольжения слева в раскрывающемся списке DETAILS/SUMMARY

Для демонстрации этого нового тега, посмотрите эту демонстрацию:

https://jsfiddle.net/43m61yt0/1/

Вот HTML-код для этого:

<details>
  <summary>Copyright 1999-2014.</summary>
  <section>
    <p> - by Refsnes Data. All Rights Reserved.</p>
    <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
  </section>
</details>

В моем случае после тэга summary я поместил все остальное содержимое в собственный тэг section, чтобы его можно было стилизовать, потому что селектор summary:after, похоже, не работал. Я попытался использовать CSS3 переходы по высоте для тега section и details, но это не помогло. Вот что я попробовал:

<style type="text/css">
DETAILS
{
 transition:height 3s ease-in;
}
</style>
7
Volomike

Это должно исправить это .

details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; margin-left: -10px}
  100%  {opacity: 1; margin-left: 0px}
}
<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

Некоторая заслуга идет Эндрю для указания на это. Я адаптировал его ответ. Вот как это работает. При добавлении атрибута [open] к тегу DETAILS он запускает только ключевой кадр анимации при нажатии. Затем, добавив SUMMARY ~ *, это означает «все элементы после тега SUMMARY», так что анимация применяется к ним, а не к элементу SUMMARY.

20
Volomike

Возможно, вы захотите использовать CSS-анимацию, используя keyframes, если вы не планируете, чтобы она появлялась при наведении на нее курсора. Если вы хотите, чтобы анимация появлялась, например, когда вы видите подробное/сводное описание на странице, вы можете использовать jQuery, чтобы браузер добавлял класс анимации при прокрутке.

https://jsfiddle.net/22e95bxt/

Это то, что вы ищете?

Правка: Упс. Это НЕ то, что вы просите. Виноват!

1
Andrew

details
{
    transition: height 1s ease;
    overflow: hidden;
}

details:not([open])
{
    height: 1.25em;
}

details[open]
{
    height: 2.50em;
}
<details>
    <summary>Example</summary>
    Height needs to be set for this to work. Works on Chrome, haven't tested further.
</details>

Я рекомендую вам также проверить Animate.css здесь: http://daneden.me/animate . Если

1
Daniel Sepp