web-dev-qa-db-ja.com

テーブル行の切り替えをアニメーション化する方法は？

テーブル行の出現と消滅をアニメーション化したい。

まず、CSStransitionを使用してみましたが、displayプロパティの変更により何もしませんでした。

そこで、animationを使用しましたが、これは期待どおりに機能します。

問題は、アニメーションの開始時に行の全高が予約されているです。問題の説明については、以下のスニペットを参照してください。アニメーションが開始される前に、行3がすぐに押し下げられます。

行の高さを徐々にアニメーション化して、必要なだけのスペースを取るようにするにはどうすればよいですか？

ボーナスとして：

  • 固定の高さは不要行に対して
  • スケーリングではなく、翻訳として表示される必要があります。 上の行の一番下からスライドのように見えるはずです
  • bidirectionalにする必要があります（非表示にする場合は逆になります）
$('button').on('click', function() {
  $('tr:nth-child(2)').toggleClass('active');
});
@keyframes anim {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
tr {
  background: #eee;
  border-bottom: 1px solid #ddd;
  display: none;
  transform-Origin: top;
}
tr.active {
  display: table-row;
  animation: anim 0.5s ease;
}
td {
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button type="button">Toggle</button>
<table>
  <tbody>
    <tr class="active">
      <td>Row 1</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr class="active">
      <td>Row 3</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>
csscss3css-transitionscss-animations
14
Benjamin

tablerow/cellは、その内容よりも小さいheightを尊重しないため、内部divを使用する必要があります。 displayをアニメートしないで、heightに設定されたautoをアニメートできないため、ここでmax-height。

トリックは、max-height最高のコンテンツを有効にするのに十分な値。

$('button').on('click', function() {
  $('tr:nth-child(2)').toggleClass('active');
});
table {
  border-collapse: collapse;
}
tr {
  background: #eee;
  border-bottom: 1px solid #fff;
}
tr, td {
  padding: 0;
}
tr td div {
  max-height: 0;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  transition: max-height 0.3s, padding 0.3s;
}
tr.active td div {
  max-height: 100px;
  padding: 10px 10px;
  transition: max-height 0.6s, padding 0.6s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button type="button">Toggle</button>
<table>
  <tbody>
    <tr class="active">
      <td><div>Row 1</div></td>
      <td><div>...</div></td>
      <td><div>...</div></td>
    </tr>
    <tr>
      <td><div>Row 2</div></td>
      <td><div>...</div></td>
      <td><div>...</div></td>
    </tr>
    <tr class="active">
      <td><div>Row 3</div></td>
      <td><div>...</div></td>
      <td><div>...</div></td>
    </tr>
  </tbody>
</table>
22
LGSon

CSS3を使用し、最新のブラウザをサポートするオプションがある場合は、transform:translateYトランジションの使用を検討し、overflow:hiddenでオーバーフローを隠すことができます。

Edge/IEはテーブル要素の変換変換をサポートしません。Chromeはサポートします。

2
Thierry van der Vloet