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

Question

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

Ils sont appliqués à un div avec du contenu à l'intérieur.

J'ai aussi du javascript qui, lorsqu'on clique sur un div, change le nom de la classe de l'élément. Cela fonctionne bien pour l'expansion et la réduction, 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).

Answer 1

La solution (purement CSS) jusqu'à présent

Si vous laissez 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'à ce que vous obteniez 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) alors que l'option height se contentera de "suivre" la propriété max-height et croître jusqu'à ce qu'il atteigne 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 de 50 % mais que la transition elle-même affecte la hauteur du parent d'une manière ou d'une autre ? ! Cela nécessiterait probablement plusieurs reflux des calculs sur chaque image, ce qui entraîne des problèmes de performance.

Comme l'a dit Fabb En ce qui concerne les transitions CSS, la spécification relative aux transitions CSS stipule que les valeurs en pourcentage doivent être prises en charge, ce n'est donc qu'une question de temps avant que les moteurs ne décident dans quels cas ils vont prendre en charge les transitions utilisant des points à valeur dynamique. Cependant, je ne suis pas sûr de ce qui pourrait être considéré comme un comportement correct pour les transitions de type auto valeurs pensées.

Answer 2

Selon le Spec du W3C sur les transitions CSS3 les deux longueur y pourcentage devrait être autorisé pour une transition sur la propriété hauteur . Je suppose donc que ce n'est qu'une question de temps avant que la fourniture d'un pourcentage soit prise en charge par les navigateurs.

Answer 3

J'ai eu le même problème. La transition fonctionnait bien lors de la "réduction", mais apparaissait sans transition (comme si elle était "activée") lors de l'"expansion", alors que "display:none" était défini auparavant.

J'ai accidentellement trouvé une solution fonctionnelle lors du débogage : le simple fait d'interroger le "offsetHeight" semble forcer un nouveau 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 le fait de l'avoir a fait la différence.

Answer 4

J'ai utilisé la solution suivante pour les éléments pour lesquels j'ai besoin de basculer entre display none et block, et de 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);
    ...
}

le site setTimeout forcera un court délai permettant à la transition de se produire après le basculement de la propriété d'affichage. J'espère que cela vous aidera.

Answer 5

C'est le passage de display:none à display:block qui arrête la transition. Essayez de définir le style réduit à display:block ; height:0 ; overflow:hidden ;

Remarque : une hauteur étendue de auto arrêtera également la transition. Si aucune hauteur n'est définie sur le bloc contenant, une hauteur de 100 % est égale à une hauteur automatique.