css - css3 トランジションを使用したテーブル行の表示/非表示

Question

ページの一部で、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を使用しないアニメーションで表の行を表示/非表示にする方法はありますか?

Answer 1

アップデート：

実際、私の以前の回答は質問に答えています! しかし、絶対に明示的ではありません。「ねえ、アイデアはここにあります。好きな場所に適用してください」. 解決策の本質は明確で、誰でも使用できると思いました...しかし、とにかく、アイデア全体をできるだけ明確な方法で公開し、解決策を単純な問題に適用します。テーブル（OPには構造が表示されていないため）。

解決：

短縮版：

Div を使用してコンテンツをセルにラップすると、max-height プロパティと max-height トランジションを使用できます。カスタム トランジション カーブを使用すると、高い max-height を使用することによる遅延を「マスク オフ」できます。

デモはこちら: http://jsfiddle.net/1rnc9bbm/4/

長いバージョン:

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

W3 から (テーブル セルの高さについて):

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

W3 から (テーブル行の高さについて):

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

このような状況では、内部マークアップ (通常は div 要素) を使用して間接的に高さを制限するしかありません。Div 要素は max-height を尊重するため、コンテンツが引き伸ばされ、table-cell も「div の max-height」を尊重します。必要な高さはこれだけであるためです。

max-height トランジションの問題は、トランジションの計算方法に起因する単なる遅延です。テーブルでは、通常、動的で予測不可能な長さ (テーブル セルの高さになります) を持つ動的コンテンツを表示するため、テーブルが展開されたコンテンツに正確に適合するために必要な正確な最大高さはわかりません。したがって、一部のセルで必要とされるよりも高い 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/3395460

リンクされた回答 (コンテナーのニーズよりも高い Max-Height 値を持つスムーズな遷移):

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

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

私は同じジレンマに陥り、max-height トランジションを使用することを選択します (max-height を高く設定すると、テキストが切り取られないと確信していました)。身長。

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

こいつのアイデアは素晴らしいが、この解決策だけで「スライドダウン」アニメーションの効果が「途切れる」。少し考えて、最終的な解決策にたどり着きました。

Rhys's Idea (上のリンクのガイ) を使用した私のソリューションは次のとおりです。

「滑らかな成長」を伴うスライド ダウン アニメーション (ホバー)、および (実質的に) 「遅延」のないスライド アップ アニメーション:

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 によるアニメーションのアプローチを使用しても問題はありません。

私が助けてくれることを願っています！

Answer 2

このようなものが必要最小限です。作業バージョン： http： //jsfiddle.net/GCJrd/

頭

<style>
.togglebox {
background-color:#CCC;
height: 100px;
max-height: 100px;
-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;
}
</style>

<script src="js/jquery-1.7.1.min.js"></script>
<script>
  $(document).ready(function(){
    //Hide the toggle-area when page load
    $(".togglebox").hide();
    //slide up and down when click over id #one
    $("#one").click(function(){
    // slide toggle effect set to 600 you can set it faster too.
    $(".togglebox").slideToggle(600);
    return true;
  });
});
</script>

体

<button id="one">showLine1</button>
<table id="my_table">
<tbody>
  <tr>
  <td>1</td>
  <td>2</td>
 </tr>
 <tr class="togglebox">
  <td>hidden 1</td>
  <td>hidden 2</td>
  </tr>
</tbody>
</table>