高さを遷移するにはどうすればよいですか:0; 高さ:自動; CSSを使用していますか?


2136

<ul>CSSトランジションを使用してスライドダウンを作成しようとしています。

はに<ul>始まりますheight: 0;。ホバーすると、高さがに設定されheight:auto;ます。ただし、これにより、遷移ではなく、単に表示されます。

からheight: 40px;まで実行すると、までheight: auto;スライドしheight: 0;、突然正しい高さにジャンプします。

JavaScriptを使用せずにこれを他にどのように実行できますか?

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent40:hover #child40 {
  height: auto;
}
h1 {
  font-weight: bold;
}
The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr>
<div id="parent0">
  <h1>Hover me (height: 0)</h1>
  <div id="child0">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>
<hr>
<div id="parent40">
  <h1>Hover me (height: 40)</h1>
  <div id="child40">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>


height:auto/max-heightソリューションは、エリアを拡大している場合heightに制限したい場合にのみ機能すると思います。あなたが持っている場合max-heightのを300px、しかし、返すことができるコンボボックスのドロップダウン、50px、そしてmax-heightあなたは、助けにはなりません50px要素の数に応じて可変である、あなたはので、私はそれを修正することができないことは不可能な状況に到着することができませんheight修正された、それheight:autoが解決策でしたが、これではトランジションを使用できません。
クリストファートーマス

51
OPはjsではなくcssソリューションを試みています。そうでない場合、オーバーフローとアニメーションを使用できます
Toni Leigh

5
@VIDesignz:しかし、内側のdivの-100%margin-topは、高さはなくラッパーdivのを受け取ります。したがって、このソリューションには同じ種類の問題があり、最大高さのソリューションと同じです。さらに、幅がコンテンツの高さよりも小さい場合、すべてのコンテンツが-100%margin-topで非表示になるわけではありません。したがって、これは間違った解決策です。
GregTom 2015

1
適切なソリューションの仕様と実装に関する議論については、github.com / w3c / csswg-drafts / issues / 626を参照してください
Ben Creasy

回答:


2745

max-height移行ではなく、で使用しheightます。そしてmax-height、あなたの箱がこれまでに得るよりも大きい何かに値を設定してください。

こちらの別の回答でChris Jordanが提供するJSFiddleデモを参照してください。

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}
<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>


324
これはうまくいきます!最初は非常に高いmax-heightで開始されるため、開始時に遅延があることを除いて、これはやや煩わしいと思います
vsync

175
+1素晴らしいソリューション!トランジションの速度は、max-height値へのトランジションに指定した時間として計算されます。ただし、高さはmax-heightよりも小さいため、実際の高さへのトランジションは、時間指定。
kingjeffrey

50
実際の計算値よりはるかに大きい値を使用する必要がある場合、これにより醜い遷移が終了する可能性があることに注意してください。画面のサイズが異なるため、divの高さを0からコンテンツの高さまで大きく変化させようとしているときに、このことに気付きました(2560x1440モニターでは2行、スマートフォンでは> 10行)。このため、私は最終的にjsで行きました。
jpeltoniemi 2013年

44
一方向の遅延は発生しますが、他の方向の遅延は発生しないため、非常に見苦しいソリューションです。
Tim

84
これはかなり面倒なソリューションです。コンテナーの拡張された高さがいくらか予測できないため、OPがheight:autoを使用することを想定しています。このソリューションでは、アニメーションが表示される前に遅延が発生します。さらに、アニメーションの表示時間は予測できません。各コンテナの子ノードの合計の高さを計算し、正確な高さの値に緩和することで、より予測可能な(そしてよりスムーズな)結果が得られます。
Shawn Whinnery 2014

314

代わりにscaleYを使用してください。

ul {
  background-color: #eee;
  transform: scaleY(0);    
  transform-origin: top;
  transition: transform 0.26s ease;
}
p:hover ~ ul {
  transform: scaleY(1);
}
<p>Hover This</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

私は上の上記のコードのベンダー接頭辞バージョン作ったjsfiddleを、そしてあなたの変更jsfiddleを scaleYの代わりに高さを使用します。


6
この回答はcss3-transition対応ブラウザでうまく機能するので賛成ですが、これはIE <9ではまったく機能せず、IE <10ではアニメーション化されない(ジャンプするだけ)
Hailwood 2013年

215
この方法では、目的の効果が部分的にしか達成されませんが、実際にスペースが削除されるわけではありません。変換されたボックスは、相対的に配置された要素のように機能します。どのように拡大縮小されても、スペースは占有されます。最初のjsFiddleを受け取り、下部に偽のテキストを追加するこのjsFiddleをチェックしてください。ボックスの高さがゼロにスケーリングされている場合、その下のテキストが上に移動しないことに注意してください。
アニムソン

9
今、それはありません:jsfiddle.net/gNDX3/1は、基本的には何が必要に応じて、あなたの要素をスタイルする必要があります。CSS / HTMLには、特効薬やウィジェットのような動作はありません。
dotnetCarpenter 2013

70
私は別のアプローチを試みている人を称賛しますが、このソリューションがもたらす現実の影響と複雑さは、すでにひどい最大高さのハックよりもはるかに悪いです。使用しないでください。
mystrdat 2013年

2
@SquareCat大丈夫。:ここのようなより引き出しものであるjsfiddle.net/dotnetCarpenter/WTL2r
dotnetCarpenter

202

関係する高さの1つがである場合、現在、高さをアニメートすることはできませんauto。2つの明示的な高さを設定する必要があります。


12
通常、問題を解決するには複数の方法があり、それらすべてが適切または可能であるとは限りません。@JedidiahHurtとRyan OreがQ&Aサイトで可能な回答を制限しようとしている理由がわかりません。特にこの答えを考えることは最初にここにありました。受け入れられた答えは回避策なので、二重にそうなります。
Hooray Im Helping

5
@jakeからの答えはエレガントでも正確でもありません。ここにリンクされた答えははるかに優れています。それは正しく機能し、すべてのサイズのケースを処理します-受け入れられた答えについてはどちらも言えません。
GraphicsMuncher

5
うん:そうですthis.$element[dimension](this.$element[dimension]())[0].offsetHeight
アンディ

4
これはどういうわけか修正される予定ですか?私は、これは0高さから移行することができることに期待するのはかなり自然であることを意味auto...
オーギュRiedinger

6
@Meliodasの「いいえ/あなたはできません」は、スタックオーバーフローに関する質問に対する有効かつ許容可能な回答です。
TylerH

122

私はいつも使用してきたことを次に、溶液を縮小し、最初にフェードアウトしたことfont-sizepaddingおよびmargin値を。ワイプと同じようには見えませんが、静的heightまたはなしで動作しますmax-height

作業例:

/* final display */
#menu #list {
    margin: .5em 1em;
    padding: 1em;
}

/* hide */
#menu:not(:hover) #list {
    font-size: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    /* fade out, then shrink */
    transition: opacity .25s,
                font-size .5s .25s,
                margin .5s .25s,
                padding .5s .25s;
}

/* reveal */
#menu:hover #list {
    /* unshrink, then fade in */
    transition: font-size .25s,
                margin .25s,
                padding .25s,
                opacity .5s .25s;
}
<div id="menu">
    <b>hover me</b>
    <ul id="list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

<p>Another paragraph...</p>


私のためにきちんと働いた。jQuery slideUp / Downとはかなり異なります。古いコンピューターやモバイルなどの弱いCPUと、それらの多くを同時に開閉する場合にのみ、違いを確認できます。
Cruz Nunez

3
ボタンやその他の非テキスト要素がある場合、ホバリングしていないときに不要な空白ができてしまいます。
Dennis W

3
すべての子要素を選択*して他の変更を適用することにより、さらに細かくすることができます。ただし、ボタンがで正しくスタイル設定されていれば、上記のコードの影響を受けているはずemです。
Steven Vachon

1
私の場合、さらに追加する必要がline-height: 0;ありましたborder-width: 0;
Andrey Shatilov '14 / 10/14

1
あなたは調整する必要はありませんline-heightあなたは正しく値の単位を避ける場合:developer.mozilla.org/en-US/docs/Web/CSS/...
スティーブンVachon

93

これがこの質問に対する30番目の答えであることは知っていますが、それだけの価値があると思います。これは、次のプロパティを持つCSSのみのソリューションです。

  • 開始時に遅延はなく、移行は早期に停止しません。両方向(エキスパンドとコラプス)で、CSSで300msの遷移時間を指定した場合、遷移には300ms周期かかります。
  • 実際の高さ(とは異なりますtransform: scaleY(0))を移行しているため、折りたたみ可能な要素の後にコンテンツがある場合は正しいことを行います。
  • (他のソリューションのように)マジックナンバーありますが(「ボックスがこれまでにない長さを選択する」など)、仮定が間違っていても致命的ではありません。移行は、その場合には驚くほど見ていないかもしれませんが、移行前と後に、これは問題ではありません:拡大(でheight: autoあなたが選ぶ場合)状態、全体の内容が常に正しい高さ(とは異なり、例えばを持っているmax-heightことが判明したことを低すぎる)。そして、折りたたまれた状態では、高さが本来あるべきゼロです。

デモ

これは、すべて同じ高さの、同じCSSを使用する3つの折りたたみ可能な要素のデモです。「スニペットを実行」をクリックした後、「ページ全体」をクリックしたい場合があります。JavaScriptはcollapsedCSSクラスのみを切り替えることに注意してください。測定は行われません。(チェックボックスまたはを使用して、JavaScriptをまったく使用せずにこのデモを実行できます:target)また、CSSの移行を担当する部分はかなり短く、HTMLには追加のラッパー要素が1つだけ必要なことにも注意してください。

$(function () {
  $(".toggler").click(function () {
    $(this).next().toggleClass("collapsed");
    $(this).toggleClass("toggled"); // this just rotates the expander arrow
  });
});
.collapsible-wrapper {
  display: flex;
  overflow: hidden;
}
.collapsible-wrapper:after {
  content: '';
  height: 50px;
  transition: height 0.3s linear, max-height 0s 0.3s linear;
  max-height: 0px;
}
.collapsible {
  transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
  margin-bottom: 0;
  max-height: 1000000px;
}
.collapsible-wrapper.collapsed > .collapsible {
  margin-bottom: -2000px;
  transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1),
              visibility 0s 0.3s, max-height 0s 0.3s;
  visibility: hidden;
  max-height: 0;
}
.collapsible-wrapper.collapsed:after
{
  height: 0;
  transition: height 0.3s linear;
  max-height: 50px;
}

/* END of the collapsible implementation; the stuff below
   is just styling for this demo */

#container {
  display: flex;
  align-items: flex-start;
  max-width: 1000px;
  margin: 0 auto;
}  


.menu {
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  margin: 20px;

  
}

.menu-item {
  display: block;
  background: linear-gradient(to bottom, #fff 0%,#eee 100%);
  margin: 0;
  padding: 1em;
  line-height: 1.3;
}
.collapsible .menu-item {
  border-left: 2px solid #888;
  border-right: 2px solid #888;
  background: linear-gradient(to bottom, #eee 0%,#ddd 100%);
}
.menu-item.toggler {
  background: linear-gradient(to bottom, #aaa 0%,#888 100%);
  color: white;
  cursor: pointer;
}
.menu-item.toggler:before {
  content: '';
  display: block;
  border-left: 8px solid white;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  width: 0;
  height: 0;
  float: right;
  transition: transform 0.3s ease-out;
}
.menu-item.toggler.toggled:before {
  transform: rotate(90deg);
}

body { font-family: sans-serif; font-size: 14px; }

*, *:after {
  box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

  <div class="menu">
    <div class="menu-item">Something involving a holodeck</div>
    <div class="menu-item">Send an away team</div>
    <div class="menu-item toggler">Advanced solutions</div>
    <div class="collapsible-wrapper collapsed">
      <div class="collapsible">
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
        <div class="menu-item">Separate saucer</div>
        <div class="menu-item">Send an away team that includes the captain (despite Riker's protest)</div>
        <div class="menu-item">Ask Worf</div>
        <div class="menu-item">Something involving Wesley, the 19th century, and a holodeck</div>
        <div class="menu-item">Ask Q for help</div>
      </div>
    </div>
    <div class="menu-item">Sweet-talk the alien aggressor</div>
    <div class="menu-item">Re-route power from auxiliary systems</div>
  </div>

</div>

どのように機能しますか?

これを実現するには、実際には2つの移行が必要です。それらの1つはmargin-bottom0px(展開された状態)から-2000px折りたたまれた状態(この回答と同様)に遷移します。ここでの2000は最初のマジックナンバーです。これは、ボックスがこれより高くならないという想定に基づいています(2000ピクセルは妥当な選択のようです)。

margin-bottomトランジションを単独で使用するには、2つの問題があります。

  • 実際に2000ピクセルを超えるボックスを使用している場合、aでmargin-bottom: -2000pxすべてが非表示になるわけではありません。折りたたまれた場合でも表示されます。これは、後で行う小さな修正です。
  • 実際のボックスの高さが1000ピクセルで、トランジションが300ミリ秒の長さである場合、可視のトランジションは約150ミリ秒後に既に終了しています(または反対方向に150ミリ秒遅れて開始します)。

この2番目の問題の修正は、2番目のトランジションが発生する場所であり、このトランジションは概念的にはラッパーの最小の高さをターゲットにします(「概念的に」これは実際にmin-heightはこのプロパティを使用していないためです。詳しくは後で説明します)。

以下のアニメーションは、下余白の遷移と最小高さの遷移を組み合わせたもので、どちらも同じ長さであり、同じ長さの全高から高さゼロまでの遷移を組み合わせたものです。

上記のアニメーション

左のバーは、負の下マージンが下を上に押し上げて、表示されている高さを減少させる方法を示しています。中央のバーは、最小の高さが、折りたたみの場合にトランジションが早く終了せず、拡張の場合にトランジションが遅く開始しないことを保証する方法を示しています。右のバーは、2つの組み合わせにより、ボックスが完全な高さからゼロの高さに適切な時間で遷移する様子を示しています。

私のデモでは、高さの最小値の上限として50pxを設定しました。これは2番目のマジックナンバーであり、ボックスの高さよりも低くする必要があります。50pxも妥当と思われます。そもそも50ピクセルの高さでもない要素を折りたたみ可能にしたいと思うことはほとんどありません。

アニメーションで確認できるように、結果の遷移は連続的ですが、区別はできません。最小の高さが下余白によって調整された最大の高さに等しい時点で、速度が急激に変化します。これは、両方の遷移に線形タイミング関数を使用し、遷移全体が非常に遅いため、アニメーションで非常に顕著です。実際のケース(一番上のデモ)では、遷移にかかる時間はわずか300msであり、下部マージンの遷移は線形ではありません。私は両方のトランジションに対して多くの異なるタイミング関数をいじってみましたが、結局のところ、それらはさまざまなケースで最もうまく機能するように感じました。

修正すべき2つの問題が残っています。

  1. 折りたたんだ状態では、高さが2000ピクセルを超えるボックスが完全に非表示にならない上からのポイント、
  2. 逆の問題。非表示でない場合、高さが50ピクセル未満のボックスは、トランジションが実行されていないときでも高すぎます。これは、最小の高さが50ピクセルを維持するためです。

最初の問題max-height: 0は、0s 0.3s遷移を伴う折りたたまれたケースでコンテナ要素aを与えることによって解決します。つまり、実際には遷移ではありませんが、max-height遅延して適用されます。移行が終了したときにのみ適用されます。これが正しく機能するmax-heightためには、反対の折りたたまれていない状態の数値も選択する必要があります。しかし、2000pxの場合とは異なり、選択する数値が多すぎると、トランジションの品質に影響しますが、この場合、それは本当に問題ではありません。そのため、これに近い高さになることがないほど高い数値を選択することができます。100万ピクセルを選択しました。100万ピクセルを超える高さのコンテンツをサポートする必要があると思われる場合は、1)申し訳ありません。2)いくつかのゼロを追加します。

2番目の問題は、min-height高さの最小遷移に実際に使用していない理由です。代わり::afterに、コンテナ内に、height50pxからゼロに遷移する疑似要素があります。これはと同じ効果min-heightがあります。疑似要素が現在持っている高さよりもコンテナを縮小させません。しかしheight、ではなくを使用しているのでmin-heightmax-height(もう一度遅延を適用して)遷移が終了すると、疑似要素の実際の高さをゼロに設定して、少なくとも遷移の外側で、小さな要素でも正しい高さ。のでmin-heightある強いよりもmax-height、我々は、コンテナの使用している場合、これは動作しませんmin-height代わりに擬似要素ののをheight。同じようにmax-height、前の段落では、これはmax-heightまた、移行の反対側の端の値を必要とします。ただし、この場合は50pxを選択するだけです。

Chrome(Win、Mac、Android、iOS)、Firefox(Win、Mac、Android)、Edge、IE11(デモでフレックスボックスのレイアウトの問題を除いて、デバッグを気にしなかった)、およびSafari(Mac、iOS)でテスト済み)。フレックスボックスと言えば、フレックスボックスを使用せずにこれを機能させることができるはずです。実際、CSSトランジションを持たないという事実を除いて、ほとんどすべてをIE7で機能させることができると思います。


36
ソリューションまたはコード例を少なくとも短縮(簡略化)できるといいのですが、コード例の90%は回答に関連していないようです。
Gil Epshtain

collapsible-wrapper絶対的な位置がある場合、これらの遷移を機能させる方法はありますか?overflow: hidden親のonは遷移に必要ですが、絶対配置された要素を妨害します。
pmkro

1
@pmkroええ、私にもその問題がありました。のclip-path: polygon(...)代わりにを使用して解決しましoverflow: hiddenた。後者とは異なり、前者を移行できるからです。古いブラウザのフォールバックとして、追加のスケーリング変換を使用しました。github.com/StackExchange/Stacks/blob/develop/lib/css/components/…
balpha

2
いいね。これは本当にうまくいきます。受け入れられる答えになるはずです
Henry Ing-Simmons

84

意味論的ではないちょっとした冗談で少しすることができます。私の通常のアプローチは、コンテンツの高さを測定するためだけに使用されるスタイルのないDIVである単一の子を持つ外側のDIVの高さをアニメーション化することです。

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
}
#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div class='measuringWrapper'>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
  </div>
</div>

を省いて.measuringWrapperDIVの高さをautoに設定し、アニメーション化するだけでよいのですが、機能しません(高さは設定されますが、アニメーションは発生しません)。

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    growDiv.style.height = 'auto';
  }
}
#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}
<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
</div>

私の解釈では、アニメーションを実行するには明示的な高さが必要です。高さ(開始高さまたは終了高さ)がの場合、高さでアニメーションを取得できませんauto


10
これはjavascriptに依存しているため、javascriptを使用してメジャーリングラッパーを簡単に追加することもできます。
Quickredfox 2013

18
ラッパーなしでそれを行うことができます。ただ:function growDiv(){var growDiv = document.getElementById( 'grow'); if(growDiv.clientHeight){growDiv.style.height = 0; } else {growDiv.style.height = growDiv.scrollHeight + 'px'; }}
user1742529 2015年

8
これをチェックしてください...簡単な答えについて話しますjsfiddle.net/n5XfG/2596 ...あなたの答えは、理由もなくめちゃくちゃ複雑です。必要はありませんmax-height、の必要がないauto、とJavascriptのために特に必要はありません!たった2つの簡単な宣言
VIDesignz 2015

12
@VIDesignzマージンを超えてアニメーション化します:100%。これは、高さではなく、要素の幅の 100%です。これは、高さが幅よりも大きい要素がある場合、これはそれを非表示にしないことを意味します。また、実際のアニメーション速度は、定義されているものとはまったく異なります。
TimoTürschmann16年

3
Timoのコメントについてもっと読むまで、VIDesignzの答えに興奮しました。はいmargin-top(およびmargin-bottom)は、パーセンテージで定義した場合の幅に関連しています。これは愚かですが、開閉アニメーションのタイミングが完全に異なる理由も説明します。 -コード化された最大高さ。なぜこれを正しく行うのが難しいのですか?
Coderer 2017年

52

CSS3トランジションを使用して高さをアニメーション化する視覚的な回避策は、代わりにパディングをアニメーション化することです。

完全なワイプ効果は得られませんが、transition-durationとpaddingの値をいじると、十分に近づくはずです。高さ/最大高さを明示的に設定したくない場合は、これが目的のはずです。

div {
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated {
    height: auto;
    padding: 24px 18px;
}

http://jsfiddle.net/catharsis/n5XfG/17/(jsFiddleの上のstephbandからリフされた)


3
これが最良の答えだと思います。この手法は、子供のパディングの調整にも拡張できます。私の場合、明らかにされているコンテンツの一部で明示的な高さの遷移と組み合わせることができました。最大効果の回避策よりも全体の効果がはるかにうまくいきます。これは、明らかにするには問題ありませんが、非表示の遅延。アプリが応答していないように見えるようにする無意味な遅延を導入するよりも、アニメーションをまったく行わないほうが早いでしょう。多くの人がそれを受け入れられると思っているようで、私は驚いています。
セミコロン2014

17
ただし、ここでは高さをアニメーション化していません。あなたはパディングをアニメーション化しています...それは現在の状態から0までアニメーション化できるので、それはうまく消えることができますが、それを拡大して注意深く見ると、テキストで開いてポップし、パディングはアニメーション化するだけです。 0からautoにアニメーションする方法がわかりません。数値範囲が必要です...それがトゥイーンの動作方法です。
Rob R 14

これはハックではない良い回避策です。これはこの質問への最良の答えではありませんが、私にとってうまくいった代替手段です。時には、完全なアニメーションではなく、いくつかの高さアニメーションの効果が必要なだけです:)
Ivan Durst

このソリューションは、遷移遅延を使用する場合にも失敗します。
ミシェルジョアニス2016

このソリューションは、アニメーションが十分に速い場合に非常に滑らかなトランジションを提供するクリーンな回避策であることにも同意します(私の場合、トランジションが0.1秒のアコーディオンの場合は完璧です!)。ただし、多くのアプリケーションに適しているわけではありませんが、この質問に対する他の回答者も同様です。
Remi D

46

私の回避策は、max-heightをコンテンツの正確な高さに遷移させて、アニメーションをスムーズにし、transitionEndコールバックを使用してmax-heightを9999pxに設定し、コンテンツのサイズを自由に変更できるようにすることです。

var content = $('#content');
content.inner = $('#content .inner'); // inner div needed to get size of content when closed

// css transition callback
content.on('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function(e){
    if(content.hasClass('open')){
        content.css('max-height', 9999); // try setting this to 'none'... I dare you!
    }
});

$('#toggle').on('click', function(e){
    content.toggleClass('open closed');
    content.contentHeight = content.outerHeight();
    
    if(content.hasClass('closed')){
        
        // disable transitions & set max-height to content height
        content.removeClass('transitions').css('max-height', content.contentHeight);
        setTimeout(function(){
            
            // enable & start transition
            content.addClass('transitions').css({
                'max-height': 0,
                'opacity': 0
            });
            
        }, 10); // 10ms timeout is the secret ingredient for disabling/enabling transitions
        // chrome only needs 1ms but FF needs ~10ms or it chokes on the first animation for some reason
        
    }else if(content.hasClass('open')){  
        
        content.contentHeight += content.inner.outerHeight(); // if closed, add inner height to content height
        content.css({
            'max-height': content.contentHeight,
            'opacity': 1
        });
        
    }
});
.transitions {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}

body {
    font-family:Arial;
    line-height: 3ex;
}
code {
    display: inline-block;
    background: #fafafa;
    padding: 0 1ex;
}
#toggle {
    display:block;
    padding:10px;
    margin:10px auto;
    text-align:center;
    width:30ex;
}
#content {
    overflow:hidden;
    margin:10px;
    border:1px solid #666;
    background:#efefef;
    opacity:1;
}
#content .inner {
    padding:10px;
    overflow:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="content" class="open">
    <div class="inner">
        <h3>Smooth CSS Transitions Between <code>height: 0</code> and <code>height: auto</code></h3>
        <p>A clever workaround is to use <code>max-height</code> instead of <code>height</code>, and set it to something bigger than your content. Problem is the browser uses this value to calculate transition duration. So if you set it to <code>max-height: 1000px</code> but the content is only 100px high, the animation will be 10x too fast.</p>
        <p>Another option is to measure the content height with JS and transition to that fixed value, but then you have to keep track of the content and manually resize it if it changes.</p>
        <p>This solution is a hybrid of the two - transition to the measured content height, then set it to <code>max-height: 9999px</code> after the transition for fluid content sizing.</p>
    </div>
</div>

<br />

<button id="toggle">Challenge Accepted!</button>


14
@ Derija93それは普通の古いJavaScriptタイムアウトアニメーションを使用しています。課題は、代わりにCSS3トランジションを使用することです。
アダム

3
はい、そうです。しかし、例の中で、とにかく大量の「書き込みを減らして、より多くの」コードを提供するライブラリであるjQueryを既に使用している場合、なぜ「代わりにCSS3トランジション」を使用するのでしょうか。jQueryを使用しておらず、事実上すべてのWebサイトで実行できる場合は、バージョンがもっと複​​雑になっても、見栄えがよくなる可能性があることを指摘しておきたいと思います。私はそれをひどく間違ったことを言ったと思います。ごめんなさい。;)
キルセ2012

27
@ Derija93おそらく、CSS3トランジションのパフォーマンスが(私が見つけることができるすべてのソースによると)、jQueryアニメーションよりもはるかに優れているためです。(実際、私の現在のユースケースにとって非常に重要であり、それが私をここにもたらしました。)
Mark Amery 2012年

4
@ Derija93 'JavascriptアニメーションはCSS3トランジションの仲間と比較して実行が遅いため、jQueryアニメーションではアニメーションのループを心配する必要があります。クリックで何かをアニメーション化し、すばやくクリックして、アニメーションが繰り返されるのを観察します。これはCSS3で処理されます。
AlbertEngelB 2013年

2
@ Dropped.on.Capricaこれは少し古いです。私はすでに彼が説明しようとしている概念を誤解していると述べました。とにかく、単純なアニメーションの場合.stopは、かなり複雑なアニメーションループの問題を解決します。これで、高さと色をアニメーション化しているが、高さのアニメーションのみを中断したい場合、状況は少しトリッキーになります...
キルセ

43

受け入れられた回答はほとんどの場合に機能しますが、 divが、高さが大幅に異なる可能性アニメーションの速度はコンテンツの実際の高さに依存せず、途切れて見える場合があります。

CSSでも実際のアニメーションを実行できますが、を使用する代わりに、JavaScriptを使用してアイテムの高さを計算する必要がありますauto。jQueryは必要ありませんが、互換性が必要な場合はこれを少し変更する必要がある場合があります(Chromeの最新バージョンで動作します:))。

window.toggleExpand = function(element) {
    if (!element.style.height || element.style.height == '0px') { 
        element.style.height = Array.prototype.reduce.call(element.childNodes, function(p, c) {return p + (c.offsetHeight || 0);}, 0) + 'px';
    } else {
        element.style.height = '0px';
    }
}
#menu #list {
    height: 0px;
    transition: height 0.3s ease;
    background: #d5d5d5;
    overflow: hidden;
}
<div id="menu">
    <input value="Toggle list" type="button" onclick="toggleExpand(document.getElementById('list'));">
    <ul id="list">
        <!-- Works well with dynamically-sized content. -->
        <li>item</li>
        <li><div style="height: 100px; width: 100px; background: red;"></div></li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>


これは役立つかもしれませんが、より良い例がないと使い方がわからないのでわかりません。
Ivan Durst

1
DOM要素(たとえば、from document.getElementById('mydiv')または$('#mydiv').get())を渡すだけで、関数はそれを非表示にするか表示するかを切り替えます。CSSトランジションを設定すると、要素は自動的にアニメーション化されます。
Oleg Vaskevich 2015

スニペットを追加しました。これには、動的にサイズ変更されるコンテンツにうまく機能するという利点があります。
Oleg Vaskevich 2015

3
これは「CSSの使用」ではないため、-1。問題の要点は、JSフリーのソリューションです。「正しい」答えはハックではないと思いますが、これは...
dudewad

16
JSを使用することへの反対票-真剣に?ここでの回答の半分はJSを使用しているので、あなたの反対票は公平でも必要でもないようです。その上、この答えは、CSSを使用して実際のアニメーションを実行しています。IMOがOPのポイントでした。JSが使用されるのは、純粋なCSSでは不可能であるため、実際の高さを計算することだけです(またmin-height、リストのサイズが大きく異なる場合は、予想される回答のように設定するとアニメーションの速度に問題が発生します)。
Oleg Vaskevich 2015

30

Element.scrollHeightここで役立つプロパティについてはほとんど言及されておらず、純粋なCSSトランジションでも使用できます。プロパティは、高さが折りたたまれた結果としてコンテンツがオーバーフローするかどうか、またその方法に関係なく、常に要素の「完全な」高さを含みます(などheight: 0)。

そのため、height: 0(実質的に完全に折りたたまれた)要素の場合、その「通常の」または「完全な」高さは、そのscrollHeight値(常にピクセル長)を通じて容易に利用できます。

そのような要素の場合、たとえば(ul元の質問に従って使用して)のようにトランジションがすでに設定されていると仮定します。

ul {
    height: 0;
    transition: height 1s; /* An example transition. */
}

CSSのみを使用して、次のようなもの(ここでは、ul変数がリストを参照していると想定)で、高さのアニメーション化された「拡張」をトリガーできます。

ul.style.height = ul.scrollHeight + "px";

それでおしまい。リストを折りたたむ必要がある場合は、次の2つのステートメントのどちらでも実行できます。

ul.style.height = "0";
ul.style.removeProperty("height");

私の特定のユースケースは、不明であり、しばしばかなりの長さのアニメーションリストを中心に展開していたため、任意の「十分な大きさ」heightまたはmax-height仕様を決定し、カットオフコンテンツまたは突然スクロールする必要があるコンテンツ(overflow: autoたとえば、 。また、緩和とタイミングがで破壊されたmax-height使用済みの高さがたくさん早くそれがために取るよりも、その最大値に達する可能性があるため、ベースのソリューションをmax-height達するために9999px。そして、画面の解像度が大きくなるにつれて、ピクセルの長さが9999px口の中に味を残します。この特定のソリューションは、私の意見では、エレガントな方法で問題を解決します。

最後に、CSSアドレスの今後の改訂では、このようなことをよりエレガントに行う必要があることを期待しています。widthand を使用した遷移を含む値height(現在は少し特別な扱いを受けています)。


6
Element.scrollHeightプロパティを使用してDOMを操作するにはJavaScriptが必要であり、質問に明記されているように、JavaScript なしでこれを実行したいため、他の回答ではここでは見つかりませんでした。
TylerH 2016

3
1ページで最も高く支持されている回答が示すように、この問題を解決できる2つの疑似クラス以外にも、CSSには他にも多くの部分があります。JavaScriptでスタイルを設定することは、JSを最初に設定する必要があるため、「純粋なCSS」ではありません。多くの場合、CSSのみのソリューションを要求するのは、JavaScriptを挿入できないか、現在のプロジェクトまたはロールで許可されていないためです。
TylerH 2016

29

max-height状態ごとに異なる遷移の緩和と遅延を使用します。

HTML:

<a href="#" id="trigger">Hover</a>
<ul id="toggled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
<ul>

CSS:

#toggled{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

#trigger:hover + #toggled{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s;
}

例を参照してください:http : //jsfiddle.net/0hnjehjc/1/


12
ここでの問題は、動的環境で十分なスペースを確保するために、のようなとんでもない最大高さを使用する必要があること999999pxです。一方、フレームはこの値から計算されるため、アニメーションがシフトします。つまり、ある方向にアニメーションが「遅延」し、もう一方の方向に非常に高速になる(corr:タイミング関数)
Julian F. Weinert

29

ハードコードされた値はありません。

JavaScriptなし。

近似なし。

秘訣は、div100%の意味をブラウザに理解させるために、非表示および複製を使用することです。

このメソッドは、アニメーション化する要素のDOMを複製できる場合に適しています。

.outer {
  border: dashed red 1px;
  position: relative;
}

.dummy {
  visibility: hidden;
}

.real {
  position: absolute;
  background: yellow;
  height: 0;
  transition: height 0.5s;
  overflow: hidden;
}

.outer:hover>.real {
  height: 100%;
}
Hover over the box below:
<div class="outer">
  <!-- The actual element that you'd like to animate -->
  <div class="real">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
  </div>
  <!-- An exact copy of the element you'd like to animate. -->
  <div class="dummy" aria-hidden="true">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
  </div>
</div>


よくできました-これは、実際には存在しないはずの問題に対する有効な解決策です。トランジションが「リニア」に設定されていない限り、max-heightのアニメーション化はbasです。また、高さが可変であるCMSコンテンツのアニメーション化には(明らかに)非常に悪いです。
M_ウィレット2013年

これは賢い方法ですが、このためにDOM要素とコンテンツを複製するのは快適ではありません。
Andre Figueiredo

transform: scaleY(1)この遷移ではスペースが削除されないため、をアニメーション化することで、コンテナなしでこれを実行できます。
Fabian von Ellerts

21

これを投稿すると、すでに30を超える回答がありますが、jakeがすでに受け入れている回答よりも私の回答が向上しているように感じます。

max-heightCSS3トランジションを単に使用することから生じる問題には満足していませんでした。多くのコメント者が指摘したようmax-heightに、実際の高さに非常に近い値を設定する必要があるため、遅延が発生します。その問題の例については、このJSFiddleを参照してください。

これを回避するために(まだJavaScriptを使用していません)、transform: translateYCSS値を移行する別のHTML要素を追加しました。

これは、max-heightとの両方translateYが使用されることを意味しmax-heightます。つまり、要素がその下の要素を押し下げながらtranslateY、必要な「インスタント」の効果をもたらします。の問題はmax-heightまだ存在していますが、その影響は少なくなっています。これは、あなたのmax-height価値のためにはるかに高い高さを設定でき、それについてそれほど心配する必要がないことを意味します。

全体的な利点は、戻る(折りたたみ)への移行時に、ユーザーはtranslateYアニメーションをすぐに見ることができるため、実際にmax-heightかかる時間は重要ではありません。

フィドルとしてのソリューション

body {
  font-family: sans-serif;
}

.toggle {
  position: relative;
  border: 2px solid #333;
  border-radius: 3px;
  margin: 5px;
  width: 200px;
}

.toggle-header {
  margin: 0;
  padding: 10px;
  background-color: #333;
  color: white;
  text-align: center;
  cursor: pointer;
}

.toggle-height {
  background-color: tomato;
  overflow: hidden;
  transition: max-height .6s ease;
  max-height: 0;
}

.toggle:hover .toggle-height {
  max-height: 1000px;
}

.toggle-transform {
  padding: 5px;
  color: white;
  transition: transform .4s ease;
  transform: translateY(-100%);
}

.toggle:hover .toggle-transform {
  transform: translateY(0);
}
<div class="toggle">
  <div class="toggle-header">
    Toggle!
  </div>
  <div class="toggle-height">
    <div class="toggle-transform">
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
    </div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-header">
    Toggle!
  </div>
  <div class="toggle-height">
    <div class="toggle-transform">
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
    </div>
  </div>
</div>


素晴らしい比較@davidtaubmann、あなたのペンは違いを非常によく示しています!その圧縮効果を与える方法が好きではなかったので、私はtranslateY終わりに行きました。scalescale
Andrew Messier

@ andrew-messierに感謝します。間違いがあるため、コメントを削除しました。translateYはcodepen.io/davidtaubmann/pen/zKZvGPで実行されていません(移動する子がないため、修正が必要です)... 唯一の最大高さからの比較を完全に見ることができ、それをスケールと混合することができます(他の回答で述べたように):codepen.io/davidtaubmann/pen/jrdPER。これはすべて、私が使用しているターゲット方法論で非常に役立ちました
-DavidTaubmann

18

わかりましたので、私は非常に簡単な答えを思いついたと思います...いいえmax-heightrelativeポジショニングを使用し、li要素を処理し、純粋なCSSです。私はFirefox以外では何もテストしていませんが、CSSから判断すると、すべてのブラウザーで動作するはずです。

FIDDLE:http : //jsfiddle.net/n5XfG/2596/

CSS

.wrap { overflow:hidden; }

.inner {
            margin-top:-100%;
    -webkit-transition:margin-top 500ms;
            transition:margin-top 500ms;
}

.inner.open { margin-top:0px; }

HTML

<div class="wrap">
    <div class="inner">Some Cool Content</div>
</div>

13
これは、要素の高さがその幅を超えるまで機能します。これは、パーセンテージを使用してマージンを計算する方法の基礎です。マージンは、要素の幅に基づいて計算されます。したがって、1000ピクセル幅の要素がある場合、1100ピクセルの要素はこのソリューションが機能するには大きすぎます。つまり、負の上部マージンを増やす必要があります。基本的には、heightまたはmax-heightを使用するのとまったく同じ問題です。
dudewad 2015

15

編集:
ドロップダウンリストを作成してこの投稿を見ていましたが、更新された回答を下にスクロールします...多くの異なる回答ですが、私のドロップダウンリストも共有することにしました...完全ではありませんが、少なくともcssのみを使用します落ちる!リストをビューに変換するために、transform:translateY(y)を使用しています...
テストで詳細を確認できます
http://jsfiddle.net/BVEpc/4/
すべてのliの後ろにdivを配置しました。ドロップダウンリストは上から来ており、適切に表示するにはこれが必要でした、私のdivコードは次のとおりです:

#menu div {
    transition: 0.5s 1s;
    z-index:-1;
    -webkit-transform:translateY(-100%);
    -webkit-transform-origin: top;
}

そしてホバーは:

#menu > li:hover div {
    transition: 0.5s;
    -webkit-transform:translateY(0);
}

ulの高さがコンテンツに設定されているため、身体のコンテンツを乗り越えることができるので、ulに対してこれを行いました。

 #menu ul {
    transition: 0s 1.5s;
    visibility:hidden;
    overflow:hidden;
}

とホバー:

#menu > li:hover ul {
     transition:none;
     visibility:visible;
}

移行後の2回目は遅延であり、私のドロップダウンリストがアニメーションで閉じられた後に非表示になります...
後で誰かがこのリストの利点を利用できることを願っています。

編集:私は実際にこのプロトタイプを使用しているpplを信じられません!このドロップダウンメニューは1つのサブメニューのみにあり、それですべてです。IE 8のサポートにより、ltrとrtlの両方の方向に2つのサブメニューを持つことができるより良いものを更新しました。
LTRの
Fiddle RTLのFiddle
誰かがこれが将来役立つことを願っています。


11

min-0-heightとmax-heightも指定すると、height:0からheight:autoに移行できます。

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}

@Stuart Badmintonは、実際の例を提供できますか?私はこれをまとめましたが、どこでも動作しないようです:( jsfiddle.net/gryzzly/n5XfG
Misha Reyzlin

5
問題は、移行ルールにあります。これを機能させるには、トランジションを最小と最大の高さにも適用する必要があります。トランジション:高さ.5sリニア、最小高さ.5sリニア、最大高さ.5sリニア
スチュアートバドミントン

2
max-heightをアニメーション化するために、あなたが言ったように、後で私が入手したものは次のとおり
Misha Reyzlin

11
もちろん、これには問題があります。max-heightのアニメーション化にかかる時間は、ボックスの自動高さに移行するのにかかる時間ではありません。max-heightのアニメーション化が完了する前に、高さ:autoに最初に到達します。同様に、0に遷移する場合、max-heightはheight:autoよりも大きい高さで始まるため、遷移はすぐには開始されません。max-height:1000pxに移行すると、これが明確になります:jsfiddle.net/n5XfG/11
stephband

あなたが正しい、さらなるテストで私はこれに気づきました。完全な高さ:0から高さ:自動が実装されるかどうかはわかりませんが、状況によっては最大高さを使用すると、CSSだけを使用した場合には不可能な状況が解決されます。
スチュアートバドミントン

10

フレックスボックスソリューション

長所:

  • 簡単な
  • JSなし
  • スムーズな移行

短所:

  • 要素は固定高さのフレックスコンテナーに配置する必要があります

それが機能する方法は、常にflex-basis:contentを持つ要素でautoを持ち、代わりにflex-growとflex-shrinkを遷移させることです。

編集:Xbox Oneインターフェイスに触発された改善されたJS Fiddle。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: 0.25s;
  font-family: monospace;
}

body {
  margin: 10px 0 0 10px;
}

.box {
  width: 150px;
  height: 150px;
  margin: 0 2px 10px 0;
  background: #2d333b;
  border: solid 10px #20262e;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
}

.space {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 0;    
}

p {
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 1;
  background: #20262e;
  padding: 10px;
  width: 100%;
  text-align: left;
  color: white;
}

.box:hover .space {
  flex-grow: 0;
  flex-shrink: 1;
}
  
.box:hover p {
  flex-grow: 1;
  flex-shrink: 0;    
}
<div class="box">
  <div class="space"></div>
  <p>
    Super Metroid Prime Fusion
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Resident Evil 2 Remake
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Yolo The Game
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    Final Fantasy 7 Remake + All Additional DLC + Golden Tophat
  </p>
</div>
<div class="box">
  <div class="space"></div>
  <p>
    DerpVille
  </p>
</div>

JSフィドル


7

@jakeの答えを拡張すると、トランジションは高さの最大値まで進み、非常に高速なアニメーションが発生します。:hoverとoffの両方にトランジションを設定すると、クレイジーな速度をもう少し制御できます。

したがって、li:hoverは、マウスが状態に入るときであり、非ホバープロパティの遷移はマウスから離れます。

うまくいけば、これはいくつかの助けになるでしょう。

例えば:

.sidemenu li ul {
   max-height: 0px;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   -ms-transition: all .3s ease;
   transition: all .3s ease;
}
.sidemenu li:hover ul {
    max-height: 500px;
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}
/* Adjust speeds to the possible height of the list */

ここにフィドルがあります:http : //jsfiddle.net/BukwJ/


1
これが-1になった理由はわかりません。これは実際には、JavaScriptを大量に追加する人よりも良い試みだと思います。これは完璧な解決策ではありませんが、少し調整することでうまくいきます。これは戻り値として機能することがわかりました。トランジション:すべての500ミリ秒の立方ベジェ(0.000、1.225、0.085、0.385); これは、開始時の2秒遷移に基づいており、その後、上記のコードは初期状態に戻ります。おかげで...これは上記のすべてよりも私を助けてくれました。+1このサイトを使用してベジエmatthewlein.com/ceaser
gcoulby

OK少し調整が必要でした。トランジション:すべての500ミリ秒の立方ベジェ(0.000、1.390、0.000、0.635); トランジションが5%〜100%(実際には最終値は約28%)になるように指定する必要があるため、プロジェクトによって異なります。
gcoulby 2014

絶対に、それは理想的ではありませんが、平均的な高さがどの程度かを知ることができれば、すぐに修正できます。
jamie

7

私は本当に確かな解決策を思いついたと思います

OK!この問題はインターネットと同じくらい古いものですが、mutant-transitionというプラグインにした解決策があると思います。私のソリューションはstyle=""、DOMに変更があるたびに追跡された要素の属性を設定します。最終結果は、移行に適切なole CSSを使用でき、ハッキーな修正や特別なJavaScriptを使用しないことです。あなたがしなければならない唯一のことは、を使用して問題の要素で追跡したいものを設定することですdata-mutant-attributes="X"

<div data-mutant-attributes="height">                                                                      
        This is an example with mutant-transition                                                                                                          
    </div>

それでおしまい!このソリューションでは、MutationObserverを使用してDOMの変更を追跡します。このため、実際に何かを設定したり、JavaScriptを使用して手動でアニメーション化したりする必要はありません。変更は自動的に追跡されます。ただし、MutationObserverを使用しているため、IE11 +でのみ移行します。

フィドル!


12
通常、「JavaScriptを使用せずに」何かを行う方法を尋ねられた場合、それはJavaScriptが無効になっているブラウザーでソリューションが機能する必要があることを意味します。「自分のスクリプトを書かずに」という意味ではありません。つまり、JavaScriptを使用せずにプラグインを使用できると言っても、JavaScriptプラグインであることを考えると、誤解を招くだけです。
BoltClock

明確にする必要があります。特別なJavaScriptを使用する必要がないと言った場合、JavaScript を記述する必要がないことを意味します。JSライブラリを含め、HTMLで監視する属性を指定するだけです。固定の高さのCSSを使用したり、何かを理解したりする必要はありません。ただスタイルして行きます。
JonTroncoso 2017

「(...)実際に何かを設定したり、javascriptを使用して手動でアニメーションを作成したりする必要はありません(...)」ので、JavaScriptを楽しんでいます
Roko C. Buljan

6

ノードごとのハードセットコードや初期化するためのユーザーコードを必要とせずに、0を含む任意の開始高さから自動(フルサイズおよびフレキシブル)に移行する方法を次に示します。https : //github.com/csuwildcat / transition-auto。これは基本的にあなたが望むものの聖杯だと思います-> http://codepen.io/csuwldcat/pen/kwsdF。次のJSファイルをページにスラップするだけで、その後に行う必要があるのはreveal=""、拡張および縮小するノードから単一のブール属性を追加/削除することだけです。

サンプルコードの下にあるコードブロックをインクルードしたら、ユーザーとして行う必要があるのは次のとおりです。

/*** Nothing out of the ordinary in your styles ***/
<style>
    div {
        height: 0;
        overflow: hidden;
        transition: height 1s;
    }
</style>

/*** Just add and remove one attribute and transition to/from auto! ***/

<div>
    I have tons of content and I am 0px in height you can't see me...
</div>

<div reveal>
     I have tons of content and I am 0px in height you can't see me...
     but now that you added the 'reveal' attribute, 
     I magically transitioned to full height!...
</div>

ここにあなたのページに含めるコードブロックがあります、その後、それはすべてグレイビーです:

このJSファイルをページにドロップします-すべてJust Works™

/ *高さのコード:自動; 移行* /

(function(doc){

/* feature detection for browsers that report different values for scrollHeight when an element's overflow is hidden vs visible (Firefox, IE) */
var test = doc.documentElement.appendChild(doc.createElement('x-reveal-test'));
    test.innerHTML = '-';
    test.style.cssText = 'display: block !important; height: 0px !important; padding: 0px !important; font-size: 0px !important; border-width: 0px !important; line-height: 1px !important; overflow: hidden !important;';
var scroll = test.scrollHeight || 2;
doc.documentElement.removeChild(test);

var loading = true,
    numReg = /^([0-9]*\.?[0-9]*)(.*)/,
    skipFrame = function(fn){
      requestAnimationFrame(function(){
        requestAnimationFrame(fn);
      });
    },
    /* 2 out of 3 uses of this function are purely to work around Chrome's catastrophically busted implementation of auto value CSS transitioning */
    revealFrame = function(el, state, height){
        el.setAttribute('reveal-transition', 'frame');
        el.style.height = height;
        skipFrame(function(){
            el.setAttribute('reveal-transition', state);
            el.style.height = '';
        });
    },
    transitionend = function(e){
      var node = e.target;
      if (node.hasAttribute('reveal')) {
        if (node.getAttribute('reveal-transition') == 'running') revealFrame(node, 'complete', '');
      } 
      else {
        node.removeAttribute('reveal-transition');
        node.style.height = '';
      }
    },
    animationstart = function(e){
      var node = e.target,
          name = e.animationName;   
      if (name == 'reveal' || name == 'unreveal') {

        if (loading) return revealFrame(node, 'complete', 'auto');

        var style = getComputedStyle(node),
            offset = (Number(style.paddingTop.match(numReg)[1])) +
                     (Number(style.paddingBottom.match(numReg)[1])) +
                     (Number(style.borderTopWidth.match(numReg)[1])) +
                     (Number(style.borderBottomWidth.match(numReg)[1]));

        if (name == 'reveal'){
          node.setAttribute('reveal-transition', 'running');
          node.style.height = node.scrollHeight - (offset / scroll) + 'px';
        }
        else {
            if (node.getAttribute('reveal-transition') == 'running') node.style.height = '';
            else revealFrame(node, 'running', node.scrollHeight - offset + 'px');
        }
      }
    };

doc.addEventListener('animationstart', animationstart, false);
doc.addEventListener('MSAnimationStart', animationstart, false);
doc.addEventListener('webkitAnimationStart', animationstart, false);
doc.addEventListener('transitionend', transitionend, false);
doc.addEventListener('MSTransitionEnd', transitionend, false);
doc.addEventListener('webkitTransitionEnd', transitionend, false);

/*
    Batshit readyState/DOMContentLoaded code to dance around Webkit/Chrome animation auto-run weirdness on initial page load.
    If they fixed their code, you could just check for if(doc.readyState != 'complete') in animationstart's if(loading) check
*/
if (document.readyState == 'complete') {
    skipFrame(function(){
        loading = false;
    });
}
else document.addEventListener('DOMContentLoaded', function(e){
    skipFrame(function(){
        loading = false;
    });
}, false);

/* Styles that allow for 'reveal' attribute triggers */
var styles = doc.createElement('style'),
    t = 'transition: none; ',
    au = 'animation: reveal 0.001s; ',
    ar = 'animation: unreveal 0.001s; ',
    clip = ' { from { opacity: 0; } to { opacity: 1; } }',
    r = 'keyframes reveal' + clip,
    u = 'keyframes unreveal' + clip;

styles.textContent = '[reveal] { -ms-'+ au + '-webkit-'+ au +'-moz-'+ au + au +'}' +
    '[reveal-transition="frame"] { -ms-' + t + '-webkit-' + t + '-moz-' + t + t + 'height: auto; }' +
    '[reveal-transition="complete"] { height: auto; }' +
    '[reveal-transition]:not([reveal]) { -webkit-'+ ar +'-moz-'+ ar + ar +'}' +
    '@-ms-' + r + '@-webkit-' + r + '@-moz-' + r + r +
    '@-ms-' + u +'@-webkit-' + u + '@-moz-' + u + u;

doc.querySelector('head').appendChild(styles);

})(document);

/ *デモのコード* /

    document.addEventListener('click', function(e){
      if (e.target.nodeName == 'BUTTON') {
        var next = e.target.nextElementSibling;
        next.hasAttribute('reveal') ? next.removeAttribute('reveal') : next.setAttribute('reveal', '');
      }
    }, false);

9
これは提案されている他のソリューションよりもはるかにクリーンで柔軟なソリューションですが、私はこれがJSがまったく触れるべきではないことを個人的に信じています。あなたが間違っていると言っているのではなく、それはため息です。
mystrdat 2013年

@mystrdatは明確ですが、JSは特定の条件を監視し、監視しているイベント/条件に基づいていくつかの属性/一時的なCSS値を追加するためにのみ使用されます。移行はまだすべてCSSで行われます。私は同意しますが、このレベルのセットアップと手持ちが一見シンプルな使用例を本当に満足させるために必要であるのは悲しいです!:/
csuwldcat 2013年

1
@KarolisRamanauskasいいえ、それは問題ではありません-IEはCSSキーフレームとrequestAnimationFrameの両方をサポートしています。私はclipダミープロパティトリガーとして使用していましたが、何らかの理由でIEがクリップのアニメーション化を許可しなくなりました。私は不透明度に切り替えました、そしてそれはすべて再び機能します:codepen.io/csuwldcat/pen/FpzGa。一致するように回答のコードを更新しました。
csuwldcat 14

1
@csuwldcat非常に優れたソリューションで、コンテンツが少しの間表示されたり消えたりすることに気付きました。なぜこれが起こるのですか?それは避けられますか?
Beto Aveiga

12
私はこれに賛成したいのですが、それを機能させる方法の質問に答える代わりに、それを機能させるために作成したプラグインを共有しました。私たち、好奇心旺盛な方は、プラグインをリバースエンジニアリングする必要がありますが、それほど面白くありません。回答を更新して、プラグインの機能とその理由に関する詳しい説明を含めてください。よりわかりやすいコードに変更します。たとえば、静的CSSを書き出すだけのコードセクション全体があるとします。CSSを生成するコードよりも、CSSの方がいいと思います。すべてのブラウザー接頭辞について繰り返すなど、退屈な部分を省略することができます。
gilly3 2015年

6

max-heightをアニメーション化するためのJakeの回答は素晴らしいですが、大きなmax-heightを設定すると遅延が発生することがわかりました。

折りたたみ可能なコンテンツを内部divに移動し、内部divの高さを取得することで最大高さを計算できます(JQueryを介して、それはouterHeight()になります)。

$('button').bind('click', function(e) { 
  e.preventDefault();
  w = $('#outer');
  if (w.hasClass('collapsed')) {
    w.css({ "max-height": $('#inner').outerHeight() + 'px' });
  } else {
    w.css({ "max-height": "0px" });
  }
  w.toggleClass('collapsed');
});

ここにjsfiddleリンクがあります:http ://jsfiddle.net/pbatey/duZpT

ここで必要なコードの絶対的な最小限の量とjsfiddleです:http://jsfiddle.net/8ncjjxh8/


5

このスレッドは古くなっていますが、特定のGoogle検索で上位にランクされているため、更新する価値があると思います。

また、要素自体の高さを取得/設定するだけです。

var load_height = document.getElementById('target_box').clientHeight;
document.getElementById('target_box').style.height = load_height + 'px';

このJavascriptは、インラインスクリプトタグのtarget_boxの終了タグの直後にダンプする必要があります。


document.getElementById( 'target_box')。getBoundingClientRect()。heightが最適です。
変更

5

私はこれを行うことができました。私が持っている.child.parentのdiv。子divは、親の幅/高さ内に完全に収まりますabsolute。次に、translateプロパティをアニメーション化して、そのY値を押し下げ100%ます。その非常に滑らかなアニメーション、ここで他のソリューションのようなグリッチや欠点はありません。

このようなもの、擬似コード

.parent{ position:relative; overflow:hidden; } 
/** shown state */
.child {
  position:absolute;top:0;:left:0;right:0;bottom:0;
  height: 100%;
  transition: transform @overlay-animation-duration ease-in-out;
  .translate(0, 0);
}

/** Animate to hidden by sliding down: */
.child.slidedown {
  .translate(0, 100%); /** Translate the element "out" the bottom of it's .scene container "mask" so its hidden */
}

次のように指定します。height.parentに、px%として、または休暇auto。次に、このdivは、.childスライドするときにdivをマスクします。


これの実際の例は高く評価されます。
神経伝達物質

5

私はいくつかのJavaScriptで回答を投稿し、反対票を投じたので、迷惑になって再試行し、CSSのみで解読しました!

このソリューションでは、いくつかの「テクニック」を使用します。

  • padding-bottom:100%要素の現在の幅に関してパーセンテージが定義される「ハック」。このテクニックの詳細。
  • フロートのシュリンクラッピング(フロートのクリアハックを適用するには、追加のdivが必要です)
  • https://caniuse.com/#feat=css-writing-modeのセマンティックでない使用とそれを元に戻すためのいくつかの変換(これにより、垂直方向のコンテキストで上記のパディングハックを使用できるようになります)

ただし、CSSのみを使用してパフォーマンスの高いトランジションを取得し、スムーズなトランジションを実現する単一のトランジション機能を使用することが重要です。聖杯!

もちろん、欠点もあります!コンテンツが切り取られる幅を制御する方法がわかりません(overflow:hidden); パディングボトムハックのため、幅と高さは密接に関連しています。方法があるかもしれませんので、戻ってきます。

https://jsfiddle.net/EoghanM/n1rp3zb4/28/

body {
  padding: 1em;
}

.trigger {
  font-weight: bold;
}

/* .expander is there for float clearing purposes only */
.expander::after {
  content: '';
  display: table;
  clear: both;
}

.outer {
  float: left; /* purpose: shrink to fit content */
  border: 1px solid green;
  overflow: hidden;
}

.inner {
  transition: padding-bottom 0.3s ease-in-out;  /* or whatever crazy transition function you can come up with! */
  padding-bottom: 0%;  /* percentage padding is defined in terms of width. The width at this level is equal to the height of the content */
  height: 0;

  /* unfortunately, change of writing mode has other bad effects like orientation of cursor */
  writing-mode: vertical-rl;
  cursor: default; /* don't want the vertical-text (sideways I-beam) */
  transform: rotate(-90deg) translateX(-100%);  /* undo writing mode */
  transform-origin: 0 0;
  margin: 0;  /* left/right margins here will add to height */
}

.inner > div { white-space: nowrap; }

.expander:hover .inner,  /* to keep open when expanded */
.trigger:hover+.expander .inner {
  padding-bottom: 100%;
}
<div class="trigger">HoverMe</div>
<div class="expander">
  <div class="outer">
    <div class="inner">
      <div>First Item</div>
      <div>Content</div>
      <div>Content</div>
      <div>Content</div>
      <div>Long Content can't be wider than outer height unfortunately</div>
      <div>Last Item</div>
    </div>
  </div>
</div>
<div>
  after content</div>
</div>


これのもう1つの欠点は、カーソルを「hoverme」のdivから項目のリストに移動して、それらを操作することはできないため(おそらくOPが要求する理由)、ツールチップ関数としてのみ役立つのではなく、たとえば、ネストされたサブメニューを持つメニュー。
TylerH

これは純粋に質問の作成方法の結果であり、手法とは関係ありません。必要に応じて(つまり、JavaScriptを使用してクラスを追加したくない)input[type="checkbox"]:checked代わりにトリガーを変更することができ:hoverます
EoghanM

つまり、質問がどのように定式化されているかに関係なく、ソリューションの実装が非常に制限されている場合は、おそらくそのソリューションの回答で言及する必要があります(またはできれば説明します)。このソリューションは「聖杯」ですが、移行されたdivにカーソルを合わせることすらできません...私にとって、このような究極のソリューションのようには思えません。
TylerH

こんにちは@TylerH、申し訳ありません。元の質問のトリガーが展開されたリストを囲んでいるという事実を逃しました。そのため、ホバーしたときにリストが開いたままになるはずです。これを反映するように回答を更新しました。先ほど触れたように、CSSだけではこれまで可能とは考えられていなかった新しい手法を紹介しているので、それがトリガーされる方法はそれほど重要ではありません(数年前から解決策を探していました)。
EoghanM

4

これが、jQueryと組み合わせて使用​​したソリューションです。これは、次のHTML構造で機能します。

<nav id="main-nav">
    <ul>
        <li>
            <a class="main-link" href="yourlink.html">Link</a>
            <ul>
                <li><a href="yourlink.html">Sub Link</a></li>
            </ul>
        </li>
    </ul>
</nav>

そして機能:

    $('#main-nav li ul').each(function(){
        $me = $(this);

        //Count the number of li elements in this UL
        var liCount = $me.find('li').size(),
        //Multiply the liCount by the height + the margin on each li
            ulHeight = liCount * 28;

        //Store height in the data-height attribute in the UL
        $me.attr("data-height", ulHeight);
    });

次に、クリック関数を使用して、高さを設定および削除できます。 css()

$('#main-nav li a.main-link').click(function(){
    //Collapse all submenus back to 0
    $('#main-nav li ul').removeAttr('style');

    $(this).parent().addClass('current');

    //Set height on current submenu to it's height
    var $currentUl = $('li.current ul'),
        currentUlHeight = $currentUl.attr('data-height');
})

CSS:

#main-nav li ul { 
    height: 0;
    position: relative;
    overflow: hidden;
    opacity: 0; 
    filter: alpha(opacity=0); 
    -ms-filter: "alpha(opacity=0)";
    -khtml-opacity: 0; 
    -moz-opacity: 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

#main-nav li.current ul {
    opacity: 1.0; 
    filter: alpha(opacity=100); 
    -ms-filter: "alpha(opacity=100)";
    -khtml-opacity: 1.0; 
    -moz-opacity: 1.0;
}

.ie #main-nav li.current ul { height: auto !important }

#main-nav li { height: 25px; display: block; margin-bottom: 3px }

これは、最新のjqueryバージョンでは適切に表示されません
オリバーバッハマン

4

私は最近、ラッピングではなく要素を移行しmax-heightていliますul

推論は、smallの遅延max-heightsがlarge max-heightsに比べて(もしあるとしても)はるかに目立たないmax-heightため、またはを使用して、任意の巨大な数値font-sizeではliなく、の相対値を設定することもできますemsremsます。

フォントサイズがの場合、次のように1rem設定しますmax-height3rem(包まれたテキストに対応するために)。あなたはここに例を見ることができます:

http://codepen.io/mindfullsilence/pen/DtzjE


3

私はすべてを詳細に読んだわけではありませんが、最近この問題が発生したため、次のことを行いました。

div.class{
   min-height:1%;
   max-height:200px;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
   overflow:hidden;
}

div.class:hover{
   min-height:100%;
   max-height:3000px;
}

これにより、最初に高さが200pxまでのコンテンツを表示し、ホバーするとそのサイズが少なくともdivのコンテンツ全体と同じ高さになるdivを作成できます。Divは3000pxにはなりませんが、3000pxが私が課している制限です。:hover以外でトランジションがあることを確認してください。そうしないと、奇妙なレンダリングが発生する可能性があります。このようにして、:hoverは非:hoverから継承します。

pxから%またはautoへの移行は機能しません。同じ測定単位を使用する必要があります。これは私にとってはうまくいきます。HTML5を使用すると完璧になります...

常に回避策があることに注意してください...; )

誰かがこれが便利だと思うことを願って


3

ハードコードされたmax-height値が実際の高さよりも大きくない場合は、Jakeのmax-heightソリューションが適切に機能します(そうしないと、望ましくない遅延やタイミングの問題が発生するためです)。一方、ハードコードされた値が誤って実際の高さより大きくない場合、要素は完全に開きません。

次のCSSのみのソリューションでも、ハードコーディングされたサイズが必要です。これは、実際に発生するほとんどのサイズよりも大きくする必要があります。ただし、このソリューションは、実際のサイズがハードコーディングされたサイズよりも大きい場合にも機能します。その場合、遷移は少しジャンプする可能性がありますが、部分的に表示される要素が残ることはありません。したがって、このソリューションは、コンテンツが通常xピクセルより大きくないことを知っているだけのデータベースなど、未知のコンテンツにも使用できますが、例外があります。

margin-bottom(またはわずかに異なるアニメーションの場合はmargin-top)に負の値を使用し、overflow:hiddenを使用してコンテンツ要素を中央の要素に配置するのがアイデアです。content要素の負のマージンにより、中央の要素の高さが減少します。

次のコードでは、マージンボトムの遷移を-150pxから0pxに使用しています。content要素が150px以下である限り、これだけでも問題ありません。さらに、中央の要素のmax-heightで0pxから100%への遷移を使用します。content要素が150pxより大きい場合、これは最終的に中央の要素を非表示にします。max-heightの場合、トランジションは、閉じたときにアプリケーションを1秒遅らせるためにのみ使用され、滑らかな視覚効果のためではありません(したがって、0pxから100%まで実行できます)。

CSS:

.content {
  transition: margin-bottom 1s ease-in;
  margin-bottom: -150px;
}
.outer:hover .middle .content {
  transition: margin-bottom 1s ease-out;
  margin-bottom: 0px
}
.middle {
  overflow: hidden;
  transition: max-height .1s ease 1s;
  max-height: 0px
}
.outer:hover .middle {
  transition: max-height .1s ease 0s;
  max-height: 100%
}

HTML:

<div class="outer">
  <div class="middle">
    <div class="content">
      Sample Text
      <br> Sample Text
      <br> Sample Text
      <div style="height:150px">Sample Test of height 150px</div>
      Sample Text
    </div>
  </div>
  Hover Here
</div>

margin bottomの値は負であり、コンテンツ要素の実際の高さに可能な限り近くする必要があります。それ(絶対値)が大きい場合、max-heightソリューションと同様の遅延とタイミングの問題がありますが、ハードコーディングされたサイズが実際のサイズよりも大きくない限り、制限される可能性があります。margin-bottomの絶対値が実際の高さよりも小さい場合、タンションは少しジャンプします。いずれの場合も、遷移後、コンテンツ要素は完全に表示されるか、完全に削除されます。

詳細については、私のブログ投稿http://www.taccgl.org/blog/css_transition_display.html#combined_heightを参照してください


3

これを行うには、クリップパスを使用して反転(折りたたみ)アニメーションを作成します。

#child0 {
    display: none;
}
#parent0:hover #child0 {
    display: block;
    animation: height-animation;
    animation-duration: 200ms;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-iteration-count: 1;
    animation-delay: 200ms;
}
@keyframes height-animation {
    0% {
        clip-path: polygon(0% 0%, 100% 0.00%, 100% 0%, 0% 0%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0.00%, 100% 100%, 0% 100%);
    }
}
<div id="parent0">
    <h1>Hover me (height: 0)</h1>
    <div id="child0">Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>Some content
        <br>
    </div>
</div>


2

これは問題の正確な「解決策」ではありませんが、回避策の詳細です。テキストで書かれたようにしか機能しませんが、必要に応じて他の要素で機能するように変更できます。

.originalContent {
    font-size:0px;
    transition:font-size .2s ease-in-out;
}
.show { /* class to add to content */
    font-size:14px;
}

次に例を示します。 。http //codepen.io/overthemike/pen/wzjRKa

基本的に、font-sizeを0に設定し、高さ、max-height、scaleY()などの代わりに、高さを必要なものに変換するのに十分なペースでトランジションします。CSSを使用して実際の高さをautoに変換することは現時点では不可能ですが、その中のコンテンツを変換することは可能であるため、フォントサイズの遷移です。

  • 注-コードペンにはJavaScriptがありますが、これは、アコーディオンのクリック時にCSSクラスを追加/削除することのみを目的としています。これは、非表示のラジオボタンで実行できますが、私は高さの変換だけに焦点を当てていませんでした。

1
この回答を効果的に複製しますが、不透明度フェード効果は省略します。
SeldomNeedy

同意した。より良いアプローチ。
Mike S.
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.