web-dev-qa-db-fra.com

Comment animer le basculement des lignes d'un tableau?

Je veux animer l'apparition et la disparition des lignes du tableau.

Tout d'abord, j'ai essayé d'utiliser une transition CSS , mais cela n'a rien fait en raison du changement de la propriété display.

J'ai donc utilisé une animation , qui fonctionne comme prévu.

Le problème est, la pleine hauteur de la ligne est réservée au début de l'animation. Consultez l'extrait de code ci-dessous pour une illustration du problème: la ligne 3 est enfoncée immédiatement avant le début de l'animation.

Comment puis-je animer progressivement la hauteur de la ligne, pour qu'elle prenne autant d'espace que nécessaire?

Et en bonus:

  • il devrait ne nécessite pas de hauteur fixe pour les lignes
  • il doit apparaître comme une traduction, plutôt que comme une mise à l'échelle; il devrait ressembler à en glissant du bas de la ligne au-dessus
  • ça devrait être bidirectionnel (faire le contraire quand je le cache)
$('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

Comme tablerow/cell ne respecte pas un height plus petit que son contenu, nous devons utiliser un div intérieur, nous pouvons n'animons pas display et nous ne pouvons pas animer un height défini sur auto, donc je montre ici une solution utilisant max-height.

L'astuce consiste à donner max-height une valeur suffisamment élevée pour activer le contenu le plus élevé.

$('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

Si vous avez la possibilité d'utiliser CSS3/supporte les navigateurs modernes, vous pouvez envisager d'utiliser un transform:translateY transition et masquer le débordement avec overflow:hidden.

Notez que Edge/IE ne prend pas en charge les transformations de traduction sur les éléments de table. Chrome le prend en charge).

2
Thierry van der Vloet