Montrer/cacher les lignes de la table de transitions css3

Mise à jour:

En fait ma réponse précédente N'RÉPONDRE à la question! Mais pas tout à fait explicitement. C'est comme: "Hé, l'idée est là, il suffit d'appliquer où vous le souhaitez". Je pensais que l'essence de la solution était évidente, et n'importe qui serait en mesure de l'utiliser... Mais de toute façon, je vais exposer l'idée, dans le plus clairement que je le peux, et sera également appliquer la solution à une table simple (depuis l'OP n'a pas montré toute la structure).

Solution:

Version Courte:

L'aide d'une Div wrapper le contenu dans la cellule, nous sommes en mesure d'utiliser max-hauteur de la propriété, et aussi le max-hauteur de la transition. Avec une mesure de transition de la courbe, on peut "masquer" le retard de l'aide d'un haut max-hauteur.

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

Version Longue:

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

De W3 (Sur Table-Les Cellules De La Hauteur):

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

De W3 (Sur Table-Rowss Hauteur):

La hauteur d'une 'table-row' élément de la boîte est calculé une fois que l'agent utilisateur dispose de toutes les cellules de la ligne disponible: c'est le maximum de la ligne est calculée à hauteur, le calcul des "hauteur" de chaque cellule de la rangée, et la hauteur minimale (MIN) requis par les cellules.

Dans ces circonstances, notre seul choix est de restreindre la hauteur indirectement à l'aide d'intérieur de balisage, normalement un élément div. Parce qu'un élément Div respecter un max de hauteur, il va s'étirer notre contenu et notre table-cell devra également respecter la "div" max-height", parce que c'est toute la hauteur dont il a besoin.

Le problème avec max-hauteur de la transition n'est qu'un retard, causé par la manière dont la transition est calculée. Dans une table, habituellement vous permet d'afficher un contenu dynamique est dynamique et imprévisible de la longueur (ce qui devient de table-hauteur de la cellule), de sorte que Nous ne savons pas précis max-hauteur de notre table devront correspondre exactement au contenu élargi. Ainsi, Nous avons besoin d'augmenter max-hauteur, qui sera plus que le nécessaire par certaines cellules. Quand il arrive, notre transition est mal calculé (basé sur le max-height et pas de hauteur totale, qui sera montré et d'animation), et de l'animation devient bizarre et imprécis. Pour montrer une belle et bonne transition pour l'utilisateur, j'ai trouvé une excellente solution en utilisant une mesure de transition de la courbe. Plus de détails à propos de ce problème et sa solution sont à la fin de cette réponse.

Bien, nous avons notre "max-height respectueux de l'élément", une transition en douceur pour notre max-hauteur de l'animation, et notre table... il est Maintenant temps pour tout mettre en place:

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

Simple démo ici (le code affiché ci-dessus): http://jsfiddle.net/1rnc9bbm/3/ , et une plus complète (et commune) de la table de démo ici: http://jsfiddle.net/1rnc9bbm/4/

Je ne pense pas que les downvotes étaient justes, mais je suis d'accord que cette version est beaucoup plus complet, et n'a de réponse dans un explicitement façon, l'OP de la question. Si vous avez des questions ou des points que souhaitez-moi de clarifier, vous n'avez pas besoin de downvote (s'il vous plaît), il suffit de demander/commentaire ci-dessus. Je serai très heureux de vous aider si je le peux.

Obs: OP n'a pas fourni un Html, ni de détails sur la table, Il veut développer, de sorte que toute ma solution est basée dans le généralement l'utilisation de la table.

Précédente (Original) Réponse:

Je viens de répondre à cette situation exactement dans une autre question. Et dans mon cas précis, j'avais besoin de faire exactement ce que Vous avez dit. J'ai une table, et que vous voulez développer une ligne de la table lorsque l'utilisateur place le pointeur de il.

La même réponse s'applique à votre question:

https://stackoverflow.com/a/27773588/3395460

Lié Réponse (Transitions en Douceur avec le Plus haut maximum-Hauteur de la valeur de besoins par conteneur):

Comme indiqué par @maskacovnik, ça va être un plus complet (et intégral) réponse si il contient également le code de ma première réponse, et aussi le code qui explique une partie de la solution de ma mise à jour de réponse. Le voici:

[...] J'avais besoin de montrer les détails du mode de la description d'un produit à l'intérieur d'une cellule de tableau lorsque l'utilisateur place le pointeur de la cellule. Sans vol stationnaire, au maximum de 2 lignes de description sont affichés. Une fois que l'utilisateur place le pointeur de cela, toutes les lignes (texte peut être depuis de 1 à 8 lignes, dynamique et imprévisible longueur) doit être spectacle avec une sorte de hauteur d'animation.

Je viens de le même dilemme, et de choisir d'utiliser le max-height transition (définir un max de hauteur, dont j'étais sûr que ce sera pas couper mon texte), parce que cette approche me paraît être la solution la plus propre pour animer la hauteur.

Mais je ne pouvais pas être satisfaite du retard sur le "slide up" de l'animation, tout comme Vous.
C'est quand j'ai trouvé un commentaire à propos de la transition de la courbe de ici: http://css3.bradshawenterprises.com/animating_height/ .

L'Idée de ce mec est génial, mais cette solution seul "cut-off" de l'effet de "glisser" de l'animation. De penser un peu je viens d'une solution définitive.

Voici donc ma solution à l'aide de l'Rhys l'Idée (Guy de lien ci-dessus):

Glisser vers le Bas de l'Animation (Hover), avec une "lisse la croissance" et faites Glisser Jusqu'à l'Animation sans (presque) de "retard":

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>

C'est parfait (à mon avis) de la solution pour le menu, les descriptions et tout ce qui n'est pas extrêmement imprévisible, mais comme Vous l'avez souligné, il y a la nécessité de mettre en place une haute max-hauteur, et peut cut-off d'une surprenante hauteur du contenu dynamique. Dans cette situation spécifique, je vais utiliser jQuery/JavaScript pour animer la hauteur de la place. Depuis la mise à jour du contenu qui va être fait en utilisant une sorte de JavaScript déjà, je ne vois pas de mal à l'aide d'un Js approche de l'animation.

Espère que j'ai aidé!

Line Height : Ici vous allez.

JS:

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

CSS:

.table-part-row{
  line-height:0;
  transition: 0.2s;
  opacity: 0;
}
.table-part-row.show {
  line-height:1em;
  opacity: 1;

}

HTML:

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

J'ai trouvé une façon de cacher une ligne de la table avec les css qui fonctionne pour le texte brut, sans ajout de ces méchants div à l'. Ce n'est pas le "ne tous les, des corrections de toutes les" solution, mais vous pourriez vouloir donner un essai si vous êtes seulement à faire avec du texte dans vos tables.

(Il peut fonctionner pour d'autres contenus trop, mais je ne l'ai pas testée)

JS:

  

//just used to toggle the hide class - use what every you fancy
$('button').click(function(){ $('.toggle').toggleClass('hide'); });

CSS:

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

HTML:

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