がスムーズ

Question

だが、私はオーバーフロー

div {position:absolute;top:0;left:0;background:red;max- height:100px;width:100px; display:flex;flex-wrap:wrap;position:relative} 

それで100pxにの max-heightとテキストをdiv要素を持っていると私はそれの下部にボタンがあるとしましょうdivの中に隠されたテキストをオーバーフローし、残りを示しています。

button {position:absolute;bottom:0;width:100%;height:30px;background:blue;} 

そして、私はjQueryを使ってやろうです：ボタンをクリックするだけでスムーズにそれを下にスライドさせ、divの内の残りのすべての隠されたテキストを表示します。

Answer 1

これはどういう意味ですか？ https://jsfiddle.net/s6ypy4w1/

$(document).ready(function() { 
    $('div').css('height', 'auto'); 
    var thisHeight = $('div').height(); 
    $('div').css('height', 100); 
    $("button").on('click', function() { 
    $('div').animate({ 
     'height': thisHeight 
    }) 
    }); 
}); 

はjQueryのは、「自動」の高さは、あなたがそれになりたい初期高さにそれを復元保存するために自動breiflyに高さを設定します。次に、ボタンをクリックするとその高さにアニメートされます。お役に立てれば！

Answer 2

あなたはここにいくつかのアプローチを使用することができます。

1. CSSのみ：ハードはそれを行うために、我々は最終的に最大の高さ 値を知らないので。したがって、固定値（たとえば、300pxまたは10em）にアニメーション化する必要があります。また、以下の例のようにチェックボックスを使用するよりも、個別のIDを割り当てる必要がある（スクリプトで拡張することもできる）よりも、後方アニメーションを実装するのは難しいでしょう。

2. jQuery + CSS：これを反応させたい場合は、展開された要素の高さを計算する必要があります。以下の例では、テキスト行を数え、行の高さを掛けます。

3. レスポンシブウェブサイトの場合、または常に固定幅がある場合は、彼がここに投稿したaender'sソリューションを使用してください。

CSS ONLY（fiddle）

.overflow-box { 
 
    line-height: 1.5em; 
 
\t overflow: hidden; 
 
\t margin: 20px 0; 
 
\t position: relative; 
 
\t border: 1px solid #ccc; 
 
} 
 

 
.overflow-box input { 
 
    display: none; 
 
} 
 

 
.overflow-box label { 
 
    display: block; 
 
    position: absolute; 
 
\t z-index: 100; 
 
    top: 4.5em; 
 
    width: 100%; 
 
    text-align: center; 
 
    background: none #fff; 
 
} 
 

 
.overflow-content { 
 
    max-height: 6em; 
 
    overflow: hidden; 
 
\t transition: max-height 0s; 
 
} 
 

 
.overflow-box input:checked + label { 
 
\t top: auto; 
 
\t bottom: 0; 
 
} 
 

 
.overflow-box input:checked + label + .overflow-content { 
 
    max-height: 20em; 
 
\t margin-bottom: 1.5em; 
 
\t transition: .5s ease-in-out; 
 
}

<div class="overflow-box"> 
 
    <input id="o1" type="checkbox" /> 
 
    <label for="o1" class="overflow-button"> 
 
     Click me 
 
    </label> 
 
    <div class="overflow-content"> 
 
     This is responsive: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
</div> 
 

 
<div class="overflow-box"> 
 
    <input id="o2" type="checkbox" /> 
 
    <label for="o2" class="overflow-button"> 
 
     Click me 
 
    </label> 
 
    <div class="overflow-content"> 
 
     Short content, one line. 
 
    </div> 
 
</div> 
 

 
<div class="overflow-box"> 
 
    <input id="o3" type="checkbox" /> 
 
    <label for="o3" class="overflow-button"> 
 
     Click me 
 
    </label> 
 
    <div class="overflow-content"> 
 
     4 lines content. 
 
     <br> 4 lines content. 
 
     <br> 4 lines content. 
 
     <br> 4 lines content. 
 
    </div> 
 
</div>

のjQuery + CSS（fiddle）

var maxLines = 3; 
 
var lineHeight = 1.5; /* em */ 
 
var boxes = $('.overflow-box'); 
 
function checkBox(box, content, toggle, text) { 
 
\t var lines = text[0].getClientRects().length; 
 
\t console.log('lines: ' + lines); 
 
\t if(lines>maxLines) { 
 
\t \t box.removeClass('overflow-short'); 
 
\t \t if(box.hasClass('overflow-expanded')) { 
 
\t \t \t content.css({'max-height': (lines*lineHeight)+'em'}); 
 
\t \t } else { 
 
\t \t \t content.css({'max-height': (maxLines*lineHeight)+'em'}); 
 
\t \t }; 
 
\t } else { 
 
\t \t box.addClass('overflow-short'); 
 
\t }; 
 
}; 
 
boxes.each(function(i){ 
 
\t var thisBox = $(this); 
 
\t var thisContent = thisBox.find('.overflow-content'); 
 
\t thisContent.wrapInner('<div class="overflow-content-inner"></div>'); 
 
\t var thisToggle = thisBox.find('.overflow-toggle'); 
 
\t var thisText = thisBox.find('.overflow-content-inner'); 
 
\t checkBox(thisBox, thisContent, thisToggle, thisText); 
 
\t thisToggle.on('click', function(e) { 
 
\t \t thisBox.toggleClass('overflow-expanded'); 
 
\t \t checkBox(thisBox, thisContent, thisToggle, thisText); 
 
\t }); 
 
\t $(window).on('resize', function(e) { 
 
\t \t checkBox(thisBox, thisContent, thisToggle, thisText); 
 
\t }); 
 
});

.overflow-box { 
 
\t line-height: 1.5em; 
 
\t margin: 20px 0; 
 
\t border: 1px solid #ccc; 
 
} 
 
.overflow-content { 
 
\t overflow: hidden; 
 
\t transition: .5s ease-in-out; 
 
} 
 
.overflow-content-inner { 
 
\t display: inline; 
 
} 
 
.overflow-toggle { 
 
\t width: 100%; 
 
\t text-align: center; 
 
    background: none #fff; 
 
\t cursor: pointer; 
 
} 
 
.overflow-short .overflow-toggle { 
 
\t display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="overflow-box"> 
 
    <div class="overflow-content"> 
 
     This is responsive: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
 
    </div> 
 
\t <div class="overflow-toggle"> 
 
\t \t Click me 
 
\t </div> 
 
</div> 
 

 
<div class="overflow-box"> 
 
    <div class="overflow-content"> 
 
     Short content, one line. 
 
    </div> 
 
\t <div class="overflow-toggle"> 
 
\t \t Click me 
 
\t </div> 
 
</div> 
 

 
<div class="overflow-box"> 
 
    <div class="overflow-content"> 
 
     4 lines content. 
 
     <br> 4 lines content. 
 
     <br> 4 lines content. 
 
     <br> 4 lines content. 
 
    </div> 
 
\t <div class="overflow-toggle"> 
 
\t \t Click me 
 
\t </div> 
 
</div>