web-dev-qa-db-ja.com

css3遷移によるテーブル行の表示/非表示

ページの一部で、css3トランジションを使用して、すてきなスライド効果でいくつかのdivを表示/非表示にしています

.service_status {
        max-height: 0;
    -webkit-transition: max-height 1s ease-in-out;
    -moz-transition: max-height 1s ease-in-out;
    -ms-transition: max-height 1s ease-in-out;
    -o-transition: max-height 1s ease-in-out;
    transition: max-height 1s ease-in-out;
}

.service_status.open {
    max-height: 500px;
    -webkit-transition: max-height 1s ease-in-out;
    -moz-transition: max-height 1s ease-in-out;
    -ms-transition: max-height 1s ease-in-out;
    -o-transition: max-height 1s ease-in-out;
    transition: max-height 1s ease-in-out;
}

テーブルの一部の行で同じ手法を使用したいのですが、max-heightとheightは効果がありません（私が推測するテーブルのCSS仕様のため）。 CSS3トランジションのみを使用し、jsを使用しないで、テーブル行をアニメーションで表示/非表示にする方法はありますか？

csscss-transitions
20
wheresrhys

更新：

実際、私の以前の答えは質問に答えます！しかし、絶対に明示的にではありません。 「ねえ、アイデアはここにあります。好きなところに適用してください」のようなものです。ソリューションの本質は明確で、だれでもそれを使用できると思いました...しかし、とにかく、私はできる限り最も明確な方法でアイデア全体を公開し、シンプルなソリューションにもソリューションを適用しますテーブル（OPは構造を示さないため）。


ソリューション：

ショートバージョン：

Divを使用してコンテンツをセルにラッパーし、max-heightプロパティとmax-heightトランジションを使用できます。カスタムの遷移曲線を使用すると、最大の高さを使用することによる遅延を「隠す」ことができます。

ここのデモ： http://jsfiddle.net/1rnc9bbm/4/


ロングバージョン：

全体の問題は、テーブルセルの高さがそのコンテンツに合わせて最小であることであり、テーブル行の高さはすべてのセルに必要な最小の高さです（したがって、テーブル行の高さは、最も高いセルが必要とする最小の高さです） ）。

W3から（テーブルセルの高さについて）：

CSS 2.1では、セルボックスの高さは、コンテンツに必要な最小の高さです。

W3から（テーブル行の高さについて）：

「table-row」要素のボックスの高さは、ユーザーエージェントが行のすべてのセルを利用できるようになると計算されます。これは、行の計算された「高さ」、行の各セルの計算された「高さ」の最大値です。およびセルに必要な最小の高さ（MIN）。

これらの状況では、内部マークアップ（通常はdiv要素）を使用して間接的に高さを制限するのが唯一の選択肢です。 Div要素は最大高さを尊重するため、コンテンツが引き伸ばされ、テーブルセルも「divの最大高さ」を尊重します。これは、必要なすべての必要な高さだからです。

Max-heightトランジションの問題は、トランジションの計算方法が原因の遅延のみです。テーブルでは通常、動的で予測不可能な長さ（テーブルセルの高さになる）の動的コンテンツを表示するため、テーブルが展開されたコンテンツに正確にフィットするために必要な正確な最大高さがわかりません。したがって、一部のセルで必要とされるよりも高い、より高い最大高さを設定する必要があります。これが発生すると、トランジションが誤って計算され（表示/アニメーション化される高さ全体ではなく、最大高さに基づいて）、アニメーションが奇妙で不正確になります。ユーザーに素敵でスムーズな移行を示すために、カスタムの移行曲線を使用した素晴らしいソリューションを見つけました。この問題とその解決策の詳細は、この回答の最後にあります。

さて、「max-height respective element」、max-heightアニメーションのスムーズなトランジション、およびテーブルがあります。ここで、すべてを組み合わせる時間です。


HTML：

<table>
    <tr>
        <td>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales.
            </div>
        </td>
    </tr>
</table>

CSS：

table{
    border: 1px solid #ddd;
}


div{
    background-color: #ddd;
    width: 400px;

    overflow: hidden;
    -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
    -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
    transition: max-height 1.5s ease cubic-bezier(0, 1.05, 0, 1);

    max-height: 38px;
}

div:hover{
    -webkit-transition: max-height 2s ease;
    -moz-transition: max-height 2s ease;
    transition: max-height 2s ease;

    max-height: 400px;
}

ここに簡単なデモ（上記のコード）： http://jsfiddle.net/1rnc9bbm/3/ と、より完全な（そして一般的な）テーブルのデモはここにあります http：// jsfiddle.net/1rnc9bbm/4/

私は反対投票が公平だったとは思いませんが、このバージョンは今でははるかに完全であり、OPの質問に明確に答えています。 ご不明な点がある場合や、明確にしてほしい点がある場合は、反対票を投じる必要はありません（ください）。上記の質問/コメントを入力してください。できる限りサポートさせていただきます。

Obs：OPはHTMLを提供しておらず、拡張したいテーブルの詳細も提供していないため、私のソリューション全体は通常のテーブルの使用に基づいています。


前の（元の）回答：

私はここの別の質問でこの正確な状況にちょうど答えました。そして私の特定のケースでは、私はあなたが言ったことを正確に行う必要がありました。テーブルがあり、ユーザーがホバーしたときにテーブル行を展開したい。

同じ答えがあなたの質問に適用されます：
https://stackoverflow.com/a/27773588/339546


リンクされた回答（コンテナーが必要とするよりも高い最大高さの値を持つスムーズな遷移）：

@maskacovnikで指摘されているように、最初の回答のコードと、更新された回答の解決策の一部を説明するコードも含まれている場合は、より完全な（そして不可欠な）回答になります。はい、これ：

[...]ユーザーがセルをホバーしたときに、セルテーブル内の製品説明のモード詳細を表示する必要がありました。ユーザーがホバーしない場合、最大2行の説明のみが表示されます。ユーザーがホバーすると、すべての行（テキストは1〜8行になる可能性があり、動的で予測不可能な長さ）が何らかの高さアニメーションで表示される必要があります。

私は同じジレンマに陥り、max-heightトランジションを使用することを選択します（高いmax-heightを設定します。これにより、テキストがカットされないことが確認されています）。このアプローチは、高さ。

しかし、あなたと同じように、「スライドアップ」アニメーションの遅延に満足できませんでした。そのとき、ここで遷移曲線についての解説を見つけました。 http://css3.bradshawenterprises.com/animating_height/ 。

この男のアイデアは素晴らしいですが、このソリューションだけでも、「スライドダウン」アニメーションの効果を「カットオフ」します。だから少し考えて、私は最終的な解決策にたどり着きました。

したがって、ここにRhysのアイデア（上記のリンクのガイ）を使用した私のソリューションがあります。

「スムーズな成長」を伴うスライドダウンアニメーション（ホバー）、および（実質的に）「遅延」を伴わないスライドアップアニメーション：

div {
  background-color: #ddd;
  width: 400px;
  overflow: hidden;
  -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1);
  max-height: 38px;
}
div:hover {
  -webkit-transition: max-height 2s ease;
  -moz-transition: max-height 2s ease;
  transition: max-height 2s ease;
  max-height: 400px;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis
  placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales.
</div>

これはメニュー、説明、および非常に予測不可能ではないすべての完璧な（私の意見では）ソリューションですが、前に指摘したように、最大​​高さを高く設定する必要があり、驚くほど高い動的コンテンツ。この特定の状況では、代わりにjQuery/JavaScriptを使用して高さをアニメーション化します。コンテンツの更新はすでに何らかのJavaScriptを使用して行われるため、アニメーションへのJsアプローチを使用しても害はありません。


お役に立てば幸いです。

14
Vitox

<td>または<tr>要素に高さ遷移を適用することはできません。ただし、<td>要素のコンテンツを<div>でラップできる場合は、CSSトランジションを<div>要素に適用できます。

HTML：

<tr>
  <td><div>Contents</div></td>
  <td><div>Contents</div></td>
</tr>

CSS：

tr div {
  max-height:0;
  transition: max-height 1s ease-in-out;
}
tr.open div {
  max-height: 500px;
}
8
Tzach

Line Height ： どうぞ。

var doc = document;
var myElements = doc.querySelectorAll("[data-row='047384']");

if(myElements.length > 0){
  myElements[0].addEventListener("click", function(){
    showRows(myElements);
  });
}

function showRows(elements){
  for (var i = 0; i < elements.length; i++) {
    if(elements[i].tagName.toLowerCase() !== 'button'){
      elements[i].classList.toggle('show');
    }
  }
}
.table-part-row{
  line-height:0;
  transition: 0.2s;
  opacity: 0;
}
.table-part-row.show {
  line-height:1em;
  opacity: 1;

}
<br>
<table>
  <tr>
    <th></th>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr data-row="047384">
    <td><button data-row="047384">????</button></td>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr class="table-part-row" data-row="047384">
    <td></td>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr class="table-part-row" data-row="047384">
    <td></td>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>
5
Ron Royston

それらの厄介なdivを追加せずにプレーンテキストで機能するcssでテーブル行を非表示にする1つの方法を見つけました。 "すべて実行、すべて修正"ソリューションではありませんが、テーブル内のテキストのみを処理している場合は、試してみることをお勧めします。

（他のコンテンツでも機能する可能性がありますが、テストしていません）

  

// just used to toggle the hide class - use what every you fancy
$('button').click(function(){ $('.toggle').toggleClass('hide'); });
td {
  opacity: 1;
  padding: 10px;
  line-height: 20px;
  transition: all 0.2s ease-in-out;
} 
.hide td {
  opacity: 0;
  line-height: 0px;
  padding: 0 10px;
}

/* just some basic setup */
table {
  border-collapse: collapse;
}
td {
  background: #f1f1f1;
}
tr:nth-child(odd) td {
  background: #f9f9f9;
}
<button>Toggle Table Row</button>
<br /><br />

<table>
<tr>
  <td>foo</td>
</tr>
<tr class="toggle">
  <td>Hide Me!</td>
</tr>
<tr>
  <td>foo</td>
</tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1
Tim Schoch

私の解決策は、セルでdivを使用することと同じことを思いついただけですが、アニメーション化するために、max-heightの代わりにinner divとmargin-bottomを使用しました。次のようになります：

html：

<tr><td colspan="7">
  <div class="content">
    <div class="amin">
        multi line text
    </div>
   </div>
</td></tr>

css：

.content {
    overflow: hidden:
    margin: 0;
    float: left;
}
.anim {
    margin-bottom: -50%; /*use calc() to whatever suits you*/
    transition: all 5s;
}
.content:hover anim {
    margin-bottom: 0;
}

私はFFでのみテストしました。

0
ot_ik_