web-dev-qa-db-fra.com

Affichage/masquage des lignes de table avec des transitions css3

Sur une partie de ma page, j'utilise des transitions CSS3 pour afficher/masquer des div avec un effet de glissement agréable

.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;
}

J'aimerais utiliser la même technique sur certaines lignes de table, mais la hauteur maximale et la hauteur n'ont aucun effet (en raison des spécifications CSS pour les tables, je suppose). Est-il possible d'afficher/masquer les lignes d'un tableau avec une animation en utilisant uniquement des transitions CSS3 et aucun js?

csscss3css-transitions
20
wheresrhys

Mettre à jour:

En fait, ma réponse précédente répond à la question! Mais pas absolument explicitement. C'est comme: "Hé, l'idée est là, applique-la où tu veux". Je pensais que l’essence de la solution était claire et que tout le monde pourrait l’utiliser ... Mais de toute façon, je vais exposer toute l’idée, de la manière la plus claire possible, et aussi appliquer la solution à une solution simple. table (puisque OP ne montre aucune structure).


Solution:

Version courte:

En utilisant une div pour insérer le contenu dans la cellule, nous pouvons utiliser la propriété max-height, ainsi que la transition max-height. Avec une courbe de transition personnalisée, nous pouvons "masquer" le délai d'utilisation d'une hauteur maximale élevée.

Démo ici: http://jsfiddle.net/1rnc9bbm/4/


Version longue:

Tout le problème est que la hauteur d'une cellule de table est le minimum pour s'adapter à son contenu et que la hauteur de la ligne de la table est la hauteur minimale requise pour toutes les cellules (la hauteur de la ligne de la table est donc la hauteur minimale requise par la cellule la plus grande ).

À partir de W3 (à propos de la hauteur des cellules de table):

Dans CSS 2.1, la hauteur d'une boîte de cellule est la hauteur minimale requise par le contenu.

A partir de W3 (à propos de la hauteur des tables):

La hauteur de la boîte d'un élément 'table-row' est calculée une fois que l'agent utilisateur a toutes les cellules de la ligne disponibles: c'est le maximum de la 'hauteur' calculée de la ligne, la 'hauteur' calculée de chaque cellule de la ligne, et la hauteur minimale (MIN) requise par les cellules.

Dans ces circonstances, notre seul choix est de limiter la hauteur indirectement à l'aide d'un balisage interne, généralement un élément div. Parce qu'un élément Div respecte une hauteur maximale, il étendra notre contenu et notre table-cellule respectera également la "hauteur maximale de la div", car il s'agit de la hauteur requise.

Le problème de la transition hauteur-hauteur n’est qu’un retard, causé par le mode de calcul de la transition. Dans un tableau, vous affichez généralement un contenu dynamique de longueur dynamique et imprévisible (qui devient la hauteur de cellule de tableau). Par conséquent, nous ne connaissons pas la hauteur maximale précise dont notre table aura besoin pour s'adapter exactement au contenu développé. Ainsi, nous devons définir une hauteur maximale supérieure, qui sera supérieure à celle requise par certaines cellules. Lorsque cela se produit, notre transition est mal calculée (en fonction de la hauteur maximale et non de la hauteur totale qui sera montrée/animée), et l’animation devient étrange et imprécise. Pour montrer une transition agréable et fluide à l'utilisateur, j'ai trouvé une solution brillante utilisant une courbe de transition personnalisée. Plus de détails sur ce problème et sa solution se trouvent à la fin de cette réponse.

Eh bien, nous avons notre "élément respectueux de hauteur maximale", une transition en douceur pour notre animation de hauteur maximale et notre table ... Le moment est venu de tout mettre ensemble:


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;
}

Démo simple ici (code ci-dessus): http://jsfiddle.net/1rnc9bbm/3/ , et une démonstration plus complète (et courante) sous forme de tableau ici: http://jsfiddle.net/1rnc9bbm/4/

Je ne pense pas que les votes négatifs étaient justes, mais je conviens que cette version est maintenant beaucoup plus complète et répond de manière explicite à la question du PO. Si vous avez des questions, ou des points que vous souhaitez que je clarifie, vous n'avez pas besoin de voter (s'il vous plaît), demandez/commentez ci-dessus. Je serai très heureux d'aider si je peux.

Obs: OP ne fournit pas de HTML, ni de détails sur la table qu'il veut développer, donc toute ma solution est basée sur l'utilisation habituelle de la table.


Réponse précédente (originale):

Je viens de répondre à cette situation exacly dans une autre question ici. Et dans mon cas particulier, je devais faire exactement ce que tu avais dit. J'ai une table et je veux développer une ligne de table lorsque l'utilisateur la survole.

La même réponse s'applique à votre question:
https://stackoverflow.com/a/27773588/3395460


Réponse liée (Transitions lisses avec une valeur Max-Height supérieure à celle requise par conteneur):

Comme l'a souligné @maskacovnik, ce sera une réponse plus complète (et intégrale) si elle contient également le code de ma première réponse, ainsi que le code expliquant une partie de la solution de ma réponse mise à jour. Le voici:

[...] J'avais besoin d'afficher les détails de mode d'une description de produit dans une table de cellules lorsque l'utilisateur survole la cellule. Sans le survol de l'utilisateur, seules les deux lignes de description maximum sont affichées. Une fois que l'utilisateur la survole, toutes les lignes (le texte peut comporter de 1 à 8 lignes, longueur dynamique et imprévisible) doivent être affichées avec une sorte d'animation en hauteur.

J'arrive au même dilemme et je choisis d'utiliser la transition hauteur maximale (définition d'une hauteur maximale élevée, ce qui me coupera certainement pas le texte), car cette approche me semble être la solution la plus propre pour animer la la taille.

Mais je ne pouvais pas être satisfait du retard sur l'animation "glisser vers le haut", tout comme You . C'est alors que j'ai trouvé un commentaire sur la courbe de transition ici: http://css3.bradshawenterprises.com/animating_height/ .L’idée de ce type est brillante, mais cette solution à elle seule "atténue" l’effet de l’animation "glisser vers le bas". Alors réfléchissant un peu, je viens juste à une solution finale.

Voici donc ma solution utilisant l'idée de Rhys (Guy du lien ci-dessus):.

Slide Down Animation (Hover), avec une "croissance en douceur", et Slide Up Animation sans (pratiquement) "délai":

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> 

.

Hope I helped!
 12 
Vitox
Vous ne pouvez pas appliquer de transitions de hauteur aux éléments <td> et <tr>. Toutefois, si vous pouvez envelopper le contenu des éléments <td> avec un <div>, vous pouvez appliquer des transitions CSS aux éléments <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: Ici vous allez.
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
J'ai trouvé un moyen de masquer une ligne de tableau avec CSS qui fonctionne pour le texte brut sans ajouter ces div méchants. Ce n'est pas le "fait tout, corrige tout" solution, mais vous pouvez essayer, si vous ne traitez que du texte dans vos tableaux.
(Cela pourrait fonctionner pour d'autres contenus aussi, mais je n'ai pas testé cela)
  

// 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>
 0 
Tim Schoch
Je viens juste de penser à la même chose. Ma solution consistait également à utiliser div dans une cellule, mais pour animer, j'ai utilisé div interne et margin-bottom au lieu de max-height. Snipped serait:
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;
}

J'ai testé en FF seulement.
 0 
ot_ik_