La transition CSS ne fonctionne pas pour la hauteur en pourcentage?
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;
}
Celles-ci sont appliquées à une div avec du contenu à l'intérieur.
J'ai aussi du javascript qui dit qu'un clic sur une div change le nom de la classe sur l'élément. Cela fonctionne bien pour développer et réduire, mais il n'y a pas d'animation sur l'iphone? (Toutes les autres transitions que j'ai essayées fonctionnaient bien avec une animation fluide) Des idées?
La solution (pure CSS) à ce jour
Si vous quittez height:auto; et utilisez 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 "suivra" simplement la transition max-height et s'agrandira jusqu'à obtenir la taille du contenu.
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 50% mais que la transition elle-même affecte d'une manière ou d'une autre la hauteur du parent?! Il faudrait probablement plusieurs calculs reflow sur chaque image, ce qui poserait des problèmes de performances.
Comme indiqué par fabb , la spécification relative aux transitions CSS détermine que les valeurs en pourcentage doivent être prises en charge. Il peut donc s'agir d'une question de temps jusqu'à ce que les moteurs décident dans quels cas ils prendront en charge les transitions utilisant une valeur dynamique. points. Pourtant, je ne suis pas sûr de ce qui pourrait être considéré comme le comportement correct pour les valeurs de auto pensé.
Selon la spécification du W3C sur les transitions CSS3 , length et percent doivent être autorisés pour une transition sur la propriété height. Donc, je suppose que c'est juste une question de temps avant de fournir un pourcentage est pris en charge dans les navigateurs.
j'ai eu le même problème. La transition a bien fonctionné lors de la "réduction", mais est apparue sans transition (comme si elle était "activée") sur le "développement", lorsque "display: none" avait été défini auparavant.
Je suis tombé par hasard sur une solution opérationnelle lors du débogage: interroger simplement "offsetHeight" semble forcer un re-rendu 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 pour lesquels je dois basculer entre display none et block 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 le basculement de la propriété display. J'espère que ça aide.
C’est le changement d’affichage: aucun à afficher: bloc qui arrête la transition. Essayez de définir le style réduit pour afficher: block; hauteur: 0; débordement caché;
Remarque: une hauteur d'auto étendue arrêtera également la transition. Si aucune hauteur n'est définie sur le bloc conteneur, une hauteur de 100% est égale à une hauteur auto.
J'espère que vous avez déjà résolu ce problème, mais j'écris simplement pour dire que j'ai rencontré le même problème: WebKit, du moins sur iOS 4.1, n'animera pas une transition si celle-ci a été définie sur un élément appelé "display: none ; ", tout comme Nicholas mentionné ci-dessus.
Si vous ne souhaitez pas rendre cet élément au niveau des performances, comme dans mon cas, je propose une autre solution que de définir la hauteur sur 0. Dans le rappel d'événement onLoad de votre corps, enregistrez l'élément dans une variable et supprimez-le du DOM. Puis ré-insérez-le quand vient le temps de le montrer.
Voici une solution pour ceux qui veulent utiliser des pourcentages.
L'astuce consiste à le contenir à l'intérieur d'une div avec une hauteur et une largeur définies. Si vous divisez des conteneurs de conteneurs flottants, cela peut ne pas être idéal, mais si vous positionnez absolument des conteneurs, cela devrait fonctionner plutôt bien et 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;
}<div class="container">
<div class="expand-content">
<p>Expanded Content</p>
</div>
</div>sur JSFiddle: http://jsfiddle.net/jtZ8j/7/
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%;
}<body>
<div class="container">
<label>
Hover container
</label>
<div class="content">
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 tristique 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 ultrices in. Fusce eleifend, orci vitae sodales dictum, lectus nunc volutpat nulla, in efficitur dolor augue sed lorem. Nam ac lectus ultrices, ornare magna non, auctor neque. Mauris eros eros, bibendum commodo dolor non, posuere ultrices 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 ultrices. 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, ultricies 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 ultrices commodo. Nullam ac lacus sit amet dolor rhoncus tincidunt.
</div>
</div>
</body>