css - 自動調整 - レスポンシブ 高さ 可変




どのように私は高さを変えることができます:0; 高さ:自動; CSSを使用して? (20)

CSS遷移を使って<ul>スライドを<ul>うとしています。

<ul>height: 0;で始まりheight: 0; 。 ホバリング時、高さはheight:auto;設定されheight:auto; 。 しかし、これは単に遷移するのではなく

私がheight: 40px;からそれをすればheight: 40px; height: auto; それはheight: 0;までスライドし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>


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

フルワイプエフェクトはあまり得られませんが、トランジションデュレーションとパディング値で遊んでみると、十分に近づくはずです。 明示的に高さ/高さを設定したくない場合は、これがあなたが探しているものでなければなりません。

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より上にあるとは思わない)


max-heightではなく、変換でmax-heightを使用します。 そして、 max-height値をあなたの箱よりも大きいものに設定してください。

Chris Jordanが提供するJSFiddleデモをここの別のanswerご覧ください。

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


私は本当に固い解決策を思いついたと思う

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 +でのみ遷移します。

フィドルズ!


@ jakeの答えを拡大すると、トランジションは最大の高さの値までずっと移動し、非常に速いアニメーションを引き起こします。ホバーとオフの両方のトランジションを設定した場合、狂ったスピードをもう少し制御できます。

したがって、li:ホバーは、マウスが状態に入り、非ホバリングプロパティの遷移がマウスの離脱になるときです。

うまくいけば、これはいくつかの助けになるだろう。

例えば:

.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/ : http://jsfiddle.net/BukwJ/


ちょっとした意味論的な文章のポケリーで、あなたはできます。 私の通常のアプローチは、コンテンツの高さを測定するためだけに使用されるスタイルのない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>

.measuringWrapperを省略し、DIVの高さを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場合、高さのアニメーションを取得できません。


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

JavaScriptはありません。

近似はありません。

このトリックは、隠された&複製divされたものを使用してブラウザに100%の意味を理解させることです。

このメソッドは、アニメートする要素の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>


受け入れられた答えはほとんどの場合divが、 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>


最大高さをアニメーション化するJakeの答えは素晴らしいですが、大きな最大高さを設定することによって遅延が発生することがわかりました。

折りたたみ可能なコンテンツを内側の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.net/pbatey/duZpThttp://jsfiddle.net/pbatey/duZpT

最低限のコードが必要なjsfiddleがあります:http://jsfiddle.net/8ncjjxh8/ ://jsfiddle.net/8ncjjxh8/http://jsfiddle.net/8ncjjxh8/


私が常に使用してきた解決策は、まずフェードアウトしてから、 font-sizepaddingmargin値をfont-sizeことでした。 ワイプと同じようには見えませんが、静的なheightmax-height 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>


私の回避策は、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>


私はこれがこの質問に対する30番目の答えだと知っていますが、それはそれが価値があると思うので、ここに行きます。 これは以下のプロパティを持つCSS専用のソリューションです:

  • 最初は遅れがなく、移行が早く終わらない。 両方向(展開と折りたたみ)では、CSSで300msの遷移時間を指定すると、遷移には300msの時間がかかります。
  • 実際の高さをtransform: scaleY(0)transform: scaleY(0)とは異なりtransform: scaleY(0) 。折りたたみ可能な要素の後にコンテンツがある場合は適切な処理を行います。
  • (他の解決策のように)マジックナンバー(「あなたのボックスよりも高い長さを選んでください」など)がありますが、あなたの想定が間違ってしまうと致命的ではありません。 拡張( height: auto )状態では、コンテンツ全体が常に正しい高さを持ちます(たとえば、 max-heightを選択した場合とは異なります)。この場合、遷移は驚くほどには見えませんが、遷移の前後には問題はありません。 max-heightが低すぎると判明した)。 折りたたまれた状態では、高さはゼロでなければなりません。

デモ

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

$(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つは、0px(展開状態)から-2000pxれた状態( この回答に似ています )の-2000pxにmargin-bottom移行します。 ここで2000は最初のマジックナンバーで、これはあなたのボックスがこれよりも高くないという仮定に基づいています(2000ピクセルは合理的な選択肢のようです)。

margin-bottom遷移のみを単独で使用することには2つの問題があります。

  • 実際に2000ピクセルを超えるボックスがある場合、 margin-bottom: -2000pxピクセルですべてが隠されることはありません。折りたたまれた場合でも目に見えるものがあります。 これはあとで行う小さな修正です。
  • 実際のボックスの高さが1000ピクセルで、トランジションが300msの場合、 可視遷移は約150ms後に(または逆方向に150ms遅れて)すでに終了しています。

この2番目の問題を修正するのは、2番目の遷移が入る場所です。この遷移は概念的にラッパーの最小の高さをターゲットにしています(概念的にはmin-heightプロパティを使用していないためです)。

下の余白のトランジションと最小の高さのトランジションを同じ時間間隔で組み合わせる方法を示したアニメーションは、同じ高さから同じ高さのゼロ高さへの組み合わせの遷移を与えます。

左のバーは、負のボトムマージンがボトムを上に押して、目に見える高さをどのように減少させるかを示します。 中間のバーは、最小の高さがどのようにして折りたたみのケースで遷移が早期に終わらないことを保証するのかを示しており、拡張のケースでは、遷移は遅く開始しない。 右の棒グラフは、2つの組み合わせにより、正しい時間内にボックスが完全な高さからゼロの高さにどのように遷移するかを示しています。

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

アニメーションでわかるように、結果の遷移は連続ですが、最小の高さが下限で調整された高さに等しい瞬間には、速度が急激に変化します。 これは、両方のトランジションにリニアタイミング機能を使用し、トランジション全体が非常に遅いため、アニメーションでは非常に目立ちます。 実際のケース(上の私のデモ)では、遷移には300msしかかからず、下端の遷移は線形ではありません。 私は両方のトランジションのために多くの異なるタイミング機能を使いました。そして、最も幅広いケースで最も効果的だったように感じました。

解決すべき2つの問題が残っています。

  1. 2000ピクセル以上の高さのボックスが折り畳まれた状態で完全に隠されていない上からのポイント、
  2. 隠されていないケースでは、最小高さが50ピクセルに維持されるため、トランジションが実行されていなくても高さが50ピクセル未満のボックスが高すぎる逆問題が発生します。

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

2番目の問題は、実際に最小高さ遷移にmin-heightを使用していない理由です。 代わりに、コンテナ内にheightが50pxから0に遷移する::after擬似要素があります。 これは、 min-heightと同じ効果を持ちます。コンテナが現在の擬似要素の高さより下に収縮することはありません。 しかし、 min-height heightではなく、 heightを使用しているので、遷移が終わると、擬似要素の実際の高さをゼロに設定するためにmax-height使用することができます。小さな要素でも正確な高さを持っています。 min-heightmax-height strongerもstrongerので、疑似要素のheight min-height代わりにコンテナのmin-heightを使用すると、これは機能しません。 前段落のmax-heightと同様に、このmax-heightにはトランジションの反対側の値も必要です。 しかしこの場合、50ピクセルを選ぶことができます。

Chrome(Win、Mac、Android、iOS)、Firefox(Win、Mac、Android)、Edge、IE11(私のデモでのフレックスボックスレイアウトの問題を除いて、デバッグを気にしなかった)、Safari )。 フレックスボックスについて言えば、フレックスボックスを使用せずにこの作業を行うことが可能でなければなりません。 実際、私はあなたがIE7でほとんど全てを動かすことができると思っています - CSSトランジションがないという事実を除いて、むしろ意味のないエクササイズになります。


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

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が私が課している限界である。non:hoverにトランジションがあることを確認してください。そうしないと、奇妙なレンダリングが発生する可能性があります。このように、:ホバーはノン:ホバーから継承します。

移行は%pxまたはautoには動作しません。同じ測定単位を使用する必要があります。これは私のためにうまく動作します。HTML5を使用すると完璧になります....

周りには常に仕事があることを忘れないでください。 )

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


高さ:0から高さ:自動に切り替えることもできます。ただし、最小高さと最大高さも指定できます。

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

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

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/ : http://jsfiddle.net/0hnjehjc/1/


ここに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 }

これはまさに問題の「解決策」ではありませんが、回避策が増えています。それはテキストで書かれたようにしか動作しませんが、必要に応じて他の要素と連携するように変更することができます。

.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 : http://codepen.io/overthemike/pen/wzjRKa

本質的には、font-sizeを0に設定し、height、max-height、scaleY()などの代わりに、その高さを必要なものに変換するのに十分な速さで遷移させます。実際の高さをCSSでautoに変換することは現時点では不可能ですが、コンテンツを変換することはフォントサイズの変更になります。

  • 注 - codepenにはjavascriptがありますが、目的はアコーディオンのクリックでCSSクラスを追加/削除することだけです。これは隠されたラジオボタンで行うことができますが、私はそれに焦点を当てていませんでした。

ノード単位でハードコードを設定したり、ユーザーコードを初期化することなく、0を含む任意の開始高さからauto(フルサイズとフレキシブル)に移行する方法は次のとおりですhttps://github.com/csuwildcat/transition-auto : 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™

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

(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);

/ * DEMOのコード* /

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

ハードコーディングされた最大高さの値が実際の高さよりもはるかに大きくない場合(そうでなければ、望ましくない遅延やタイミングの問題があるため)、Jakeの最大高さの解はうまく機能します。一方、ハードコードされた値が誤って実際の高さよりも大きくない場合、要素は完全には開かれません。

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

アイデアは、マージンボトム(またはわずかに異なるアニメーションの場合はマージントップ)に負の値を使用し、コンテンツエレメントをオーバーフロー:隠しの中間エレメントに配置することです。コンテンツ要素の負のマージンは中間要素の高さを減少させます。

次のコードでは、-150pxから0pxまでのmargin-bottomのトランジションを使用しています。コンテンツ要素が150ピクセルを超えない限り、これだけで問題なく動作します。さらに、中間要素の最大高さの遷移を0〜100%の範囲で使用します。コンテンツ要素が150pxより大きい場合、最終的に中間要素が非表示になります。最大高さの場合、トランジションはスムーズなビジュアルエフェクトではなく(したがって0pxから100%まで実行できる)、閉じるときにアプリケーションを1秒遅らせるために使用されます。

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>

マージンボトムの値は、負であり、できるだけコンテンツ要素の実際の高さに近い値でなければならない。もし(absouteの値が)大きければ、max-height解と同様の遅延やタイミングの問題がありますが、ハードコードされたサイズが実際よりも大きくない限り、制限があります。マージンボトムの絶対値が実際の高さよりも小さい場合、タンジションは少しジャンプします。いずれの場合も、遷移後、コンテンツ要素は完全に表示されるか、または完全に削除される。

詳細は、私のブログpost http://www.taccgl.org/blog/css_transition_display.html#combined_height参照してhttp://www.taccgl.org/blog/css_transition_display.html#combined_height


私はこれを行うことができました。私は.child.parentdiv を持っています。子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をマスクします。


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

その理由は、小さなものの遅延max-heightsは大きなものと比較して(まったく)顕著ではなく、またはを使って任意の巨大な数よりも相対的な値をmax-heights設定することもできるということです。max-heightfont-sizeliemsrems

私のフォントサイズが1rem、私はmax-height何かのように3rem(ラップされたテキストを収容するために)私を設定します。ここでは例を見ることができます:

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





css-transitions