僅使用CSS3，有沒(méi)有辦法在細(xì)節(jié)/摘要展示上添加一個(gè)漂亮的淡入和從左滑動(dòng)的過(guò)渡效果？

有關(guān)這種新標(biāo)簽的演示，請(qǐng)參見以下演示:

details {
  transition:height 3s ease-in;
}

<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>

這應(yīng)該能解決問(wèn)題。

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>

對(duì)于那些尋找開/閉轉(zhuǎn)換的人來(lái)說(shuō)，可以通過(guò)margin-bottom屬性來(lái)偽裝。

details {
  background: gainsboro;
  padding: 10px;
}

details summary {
  cursor: pointer;
  transition: margin 150ms ease-out;
}

details[open] summary {
  margin-bottom: 10px;
}

<details>
  <summary><code>&lt;details&gt;</code> pseudo content transition</summary>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia amet magnam fugit nihil delectus, id ratione deleniti minima, ipsum accusantium exercitationem est ipsa, possimus harum distinctio consequatur qui recusandae et. Alias quas temporibus aliquam modi nulla omnis unde atque magni tempora, corporis ducimus voluptas, recusandae, repellendus officiis molestias cumque quam.
</details>

除了Volomike的回答之外，出于性能原因，也可以將margin-left改為transform: translateX()。

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

@keyframes sweep {
  0%    {opacity: 0; transform: translateX(-10px)}
  100%  {opacity: 1; transform: translateX(0)}
}

<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>

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>

我的造型…

使用max-height而不是height進(jìn)行過(guò)渡，您可以在打開的細(xì)節(jié)中擁有未知高度(小于99rem)的內(nèi)容。

details {
  margin: 1.3rem 0;
  border-bottom: 1px solid #aaa;
  padding: 0.5rem;
  height: auto;
  max-height: 1.5rem; /* set to line height */
  transition: all 0.1s ease;
}

details[open] {
  max-height: 99rem;
  transition: all 1s ease;
  border: 1px solid #aaa;
}

details summary {
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 0.5em;
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.8em;
}

<details>
  <summary>Something like… question?</summary>
  And some very, very long explanation of summarised text. And some very, very long explanation of summarised text. And some very, very long explanation of summarised text
</details>

我覺(jué)得一個(gè)真正的CSS3細(xì)節(jié)總結(jié)揭示應(yīng)該是這樣做的(沒(méi)有固定高度也沒(méi)有javascript):

@keyframes animate {
  from {grid-template-rows: 0fr;}
  to {grid-template-rows: 1fr;}
}
details > div {
  display: grid;
  grid-template-rows: 0fr;
  transition: all ease-in-out 0.5s;
}
details > div > div {
  overflow: hidden;
}
details[open] > div {
  animation: animate 0.15s 0s 1 normal forwards;
}

<details>
  <summary>Lorem ipsum</summary>
  <div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus suscipit neque vestibulum elit vehicula luctus. Aenean eget rutrum felis. Ut blandit, massa vitae pulvinar suscipit, nunc lorem pulvinar metus, sed elementum lectus erat euismod eros. Aliquam ac metus id tortor maximus mollis. Sed semper pulvinar risus. Mauris orci mauris, blandit tempus dolor sed, tincidunt pharetra nisi. Cras pulvinar ligula eu sapien cursus, in malesuada diam volutpat. Ut eleifend risus vitae eros pretium rhoncus. Nunc diam nibh, pharetra et orci eu, rutrum congue augue. Etiam quis tempor tortor. Pellentesque nec faucibus mi. Curabitur vitae tempus lorem.
    </div>
  </div>
</details>
<details>
  <summary>Lorem ipsum</summary>
  <div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus suscipit neque vestibulum elit vehicula luctus. Aenean eget rutrum felis. Ut blandit, massa vitae pulvinar suscipit, nunc lorem pulvinar metus, sed elementum lectus erat euismod eros. Aliquam ac metus id tortor maximus mollis. Sed semper pulvinar risus. Mauris orci mauris, blandit tempus dolor sed, tincidunt pharetra nisi. Cras pulvinar ligula eu sapien cursus, in malesuada diam volutpat. Ut eleifend risus vitae eros pretium rhoncus. Nunc diam nibh, pharetra et orci eu, rutrum congue augue. Etiam quis tempor tortor. Pellentesque nec faucibus mi. Curabitur vitae tempus lorem.
    </div>
  </div>
</details>

<br>
<br>

Inspired by <a >Kevin Powell</a>

如果您不打算在鼠標(biāo)懸停在CSS動(dòng)畫上時(shí)讓它出現(xiàn)，您可能會(huì)希望使用帶有關(guān)鍵幀的CSS動(dòng)畫。如果您只想顯示動(dòng)畫，比如說(shuō)，當(dāng)您在頁(yè)面上看到詳細(xì)信息/摘要描述時(shí)，您可以使用一些jQuery，以便瀏覽器在滾動(dòng)時(shí)添加動(dòng)畫的類別。

https://jsfiddle.net/22e95bxt/

這是你要找的嗎？

編輯:嗚嗚。這不是你想要的。我的錯(cuò)！