web-dev-qa-db-ja.com

HTML5の詳細/概要タグが明らかになるようにCSS3トランジションを追加する方法は？

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セレクターが機能していないようです。 sectionおよびdetailsタグの高さでCSS3トランジションを使用しようとしましたが、役に立ちませんでした。これが私が試したものです：

<style type="text/css">
DETAILS
{
 transition:height 3s ease-in;
}
</style>
htmlcsscss-transitions
16
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>

これを指摘したことで Andrew にいくらか貢献しています。私は彼の答えを採用しました。これがどのように機能するかです。 DETAILSタグに[open]属性を追加すると、クリックされたときにのみアニメーションキーフレームが呼び出されます。次に、SUMMARY ~ *を追加することで、「SUMMARYタグの後のすべての要素」を意味し、SUMMARY要素ではなくそれらにアニメーションが適用されるようにします。

40
Volomike
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 。もし

2
Daniel Sepp

ホバーしたときに表示される予定がない場合は、keyframesを使用してCSSアニメーションを使用することをお勧めします。たとえば、ページに詳細/概要の説明が表示されたときにアニメーションだけを表示したい場合は、jQueryを使用して、スクロール時にブラウザがアニメーションのクラスを追加できるようにします。

https://jsfiddle.net/22e95bxt/

これはあなたが探しているものですか？

編集：おっと。これはあなたが求めているものではありません。私の悪い！

1
Andrew