La transition CSS ne fonctionne pas pour un pourcentage de hauteur?

J’ai les définitions CSS suivantes:

.detailsCollapsed { display:none; height:0%; width:100%; -webkit-transition:height 40s ease-in-out; } .detailsExpanded { display:block; visibility:visible; height:100%; width:100%; -webkit-transition:height 40s ease-in-out; } 

Ceux-ci sont appliqués à une div avec du contenu à l’intérieur.

J’ai aussi du javascript qui, quand on clique sur un div, change le nom de la classe sur l’élément. Cela fonctionne bien pour l’expansion et l’effondrement, mais il n’y a pas d’animation sur l’iphone? (Toutes les autres transitions que j’ai essayées fonctionnent bien avec une animation fluide) Des idées?

La solution (CSS pure) jusqu’à présent

Si vous laissez la height:auto; et utiliser des valeurs fixes de max-height vous pouvez simuler une transition:

 .details-expanded { max-height: 300px; /* try to guess a max-height for your content */ } .details-collapsed { height: auto; max-height: 0; transition: max-height 500ms linear; /* pick a proportional duration */ } 

Faites attention à la durée de la transition et max-height lorsque l’élément est développé. Jouez avec les valeurs jusqu’à obtenir le comportement souhaité.

De cette façon, vous pouvez obtenir une transition entre deux valeurs définies (dans l’exemple ci-dessus, de 0 à 300) tandis que la propriété height va simplement “suivre” la transition max-height et augmenter jusqu’à obtenir la taille du contenu.


Des démos

DEMO 1 – un exemple concret de cette solution

DEMO 2 – juste une démonstration de ce qui se passe dans DEMO 1


Observations

Pour l’instant, les transitions ne sont implémentées qu’entre des valeurs prédéfinies et je suppose que c’est parce que le moteur ne peut pas deviner la valeur initiale ou finale dans certains cas. Que se passe-t-il si vous avez une transition de hauteur dont la valeur finale est de 50% mais que la transition elle-même affecte d’une manière ou d’une autre la hauteur du parent?! Cela nécessiterait probablement plusieurs calculs de refusion sur chaque trame causant des problèmes de performance.

Comme Fabb l’a dit , la spécification des transitions CSS détermine que les valeurs de pourcentage doivent être sockets en charge. Il faudra donc peu de temps avant que les moteurs ne décident quels cas ils vont supporter les transitions utilisant des points à valeur dynamic. Pourtant, je ne suis pas sûr de ce qui pourrait être considéré comme le comportement correct pour auto pensée auto valeurs auto .

Selon la spécification W3C sur les transitions CSS3 , la longueur et le pourcentage doivent être autorisés pour une transition sur la hauteur de la propriété. Donc, je suppose que ce n’est qu’une question de temps jusqu’à ce qu’un pourcentage soit pris en charge dans les navigateurs.

J’ai eu le même problème. La transition a bien fonctionné en “effondrement”, mais est apparue sans transition (comme être “allumé”) en “expansion”, quand “display: none” a été défini auparavant.

J’ai accidentellement abouti à une solution de travail lors du débogage: la simple interrogation de “offsetHeight” semble forcer un re-render interne de l’élément.

quelque chose comme ça:

  showElement = function(){ ... oEl.style.display = "block"; var xDump = oEl.offsetHeight; oEl.className = "show"; } 

xDump n’est jamais utilisé, mais l’avoir fait la différence.

J’ai utilisé la solution suivante pour les éléments sur lesquels je dois basculer entre aucun affichage et aucun blocage, et conserver l’effet de transition:

 function slidedown(element) { ... element.style.display = "block"; var timerId = setTimeout(function(){ element.style.webkitTransitionProperty = "height"; element.style.webkitTransitionTiming = "linear"; element.style.webkitTransitionDuration = "3.5s"; element.style.height = "500px"; }, 0); ... } 

La fonction setTimeout forcera un court délai permettant à la transition de se produire après avoir basculé la propriété d’affichage. J’espère que cela aide.

C’est le changement de l’affichage: aucun à afficher: bloque l’arrêt de la transition. Essayez de définir le style réduit pour afficher: block; hauteur: 0; débordement caché;

Remarque: une hauteur accrue d’auto arrêtera également la transition. S’il n’y a pas de hauteur définie sur le bloc contenant, une hauteur de 100% est égale à une hauteur de auto.

J’espère que vous avez déjà travaillé autour de cela, mais j’écris simplement pour dire que j’ai rencontré le même problème: WebKit, au moins sur iOS 4.1, n’animera pas une transition si elle était définie sur un élément avec “display: none ; “, comme Nicholas mentionné ci-dessus.

Si votre souci de ne pas rendre cet élément est la performance, comme dans mon cas, alors je propose une autre solution que de définir la hauteur à 0. Dans le rappel d’événement onLoad de votre corps, enregistrez l’élément dans une variable et supprimez-le. Puis réinsérez-le au moment de le montrer.

Voici une solution pour ceux qui veulent utiliser des pourcentages.

L’astuce consiste à le contenir à l’intérieur d’un div avec une hauteur et une largeur définies. Si vous divisez les div, cela peut ne pas être idéal, mais si vous positionnez absolument des conteneurs, cela devrait fonctionner plutôt bien tant que les éléments ne se chevauchent pas.

voici le code

 .container { width: 500px; height: 500px; background: transparent; } .expand-content{ height: 0%; color: #fff; background: green; } .expand-content:hover { height: 100%; background: orange; transition: all 2s ease; } .expand-content p { font-size: 35px; text-align: center; } 
 

Expanded Content

Solution CSS sans besoin de calculer max-height

Voici ma solution si la hauteur totale n’est pas connue

 .container{ overflow:hidden; max-height:20px; transition-property: max-height; -webkit-transition-property: max-height; transition-delay: 1s; /*Set a delay for this css-propery so content also slides up*/ -webkit-transition-delay: 1s; } .container .content{ z-index:5; background-color:LightGray; margin-top:20px; transform:translateY(-100%); -webkit-transform:translateY(-100%); transition:transform 1s; -webkit-transition:transform 1s; } .container:hover{ max-height:9999px; /*apparently "none" doesnt work*/ transition-delay: 0s; -webkit-transition-delay: 0s; } .container:hover .content{ transform:translateY(0); -webkit-transform:translateY(0); } /*Less interesting stuff below*/ body{ background-color:navy; } div,label{ margin:0; padding:0; } .container label{ /*Just a label to describe what you can do here*/ height:20px; line-height:20px; display:block; z-index:10; position:absolute; background-color:maroon; width:100%; } 
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis congue lectus pharetra interdum. Cras sit amet interdum ipsum, vel commodo ante. Maecenas quis libero eu tortor suscipit rutrum. Cras quam eros, malesuada ac semper sed, viverra condimentum nisl. Quisque lobortis porta purus non fringilla. Fusce erat eros, aliquam a diam quis, ullamcorper laoreet odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra scelerisque felis, vitae finibus dui lobortis non. Mauris iaculis rutrum vehicula. Nullam porta arcu et diam porta, in sortingstique nisl ornare. Mauris id ex maximus, lobortis erat a, laoreet justo. Nullam tempus neque enim, nec consectetur enim fringilla ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin non rutrum nisl, sed vestibulum augue. Sed ac magna et metus tempus bibendum elementum id libero. Sed semper imperdiet risus et pellentesque. Aliquam commodo magna at rhoncus pellentesque. Vivamus tempus tellus lorem, a volutpat est pharetra nec. Vestibulum velit ligula, aliquet sit amet bibendum eget, viverra scelerisque tellus. Cras aliquam hendrerit bibendum. Etiam non faucibus nisi, sit amet cursus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas in eros ac elit pretium molestie. Mauris quis dolor erat. Suspendisse scelerisque gravida libero, rutrum consectetur metus ulsortingces in. Fusce eleifend, orci vitae sodales dictum, lectus nunc volutpat nulla, in efficitur dolor augue sed lorem. Nam ac lectus ulsortingces, ornare magna non, auctor neque. Mauris eros eros, bibendum commodo dolor non, posuere ulsortingces leo. Nullam ut laoreet ligula. Nulla posuere risus nec nibh fermentum, pretium consequat tellus eleifend. Vestibulum volutpat nisl quis euismod pulvinar. Donec hendrerit augue sed dui volutpat ulsortingces. Pellentesque mollis scelerisque metus, vulputate viverra risus pellentesque et. Duis nisi ante, faucibus in nunc et, semper varius turpis. Vivamus pharetra volutpat convallis. Curabitur quis urna in orci tincidunt cursus vel ac dolor. Integer turpis augue, maximus eu lectus a, euismod consequat risus. Fusce leo lacus, dignissim vel sapien at, venenatis porttitor dui. Donec in metus non ex facilisis venenatis. In ac urna non tellus lobortis fringilla. Maecenas ornare dui nisl, gravida ornare purus aliquam in. Cras nec tortor eget neque volutpat pulvinar. In vestibulum, ante ut pharetra semper, nulla libero tincidunt nunc, a convallis orci dolor vel metus. Vivamus enim est, volutpat sit amet sagittis ut, efficitur at lacus. Morbi laoreet erat sit amet finibus finibus. Nulla sodales ut est non commodo. Aliquam sed purus a magna vehicula ullamcorper et id nunc. Curabitur aliquet tempor odio, euismod tempor ante consectetur ut. Proin neque sem, imperdiet sed est quis, ulsortingcies tincidunt sem. Donec nec sem id eros congue convallis eu in nibh. Etiam viverra sollicitudin maximus. In hac habitasse platea dictumst. Ut quis porta turpis. Duis egestas quam diam, id bibendum dolor imperdiet quis. Praesent ac odio in neque ulsortingces commodo. Nullam ac lacus sit amet dolor rhoncus tincidunt.