web-dev-qa-db-fra.com

Animation de hauteur maximale avec des transitions CSS

Je veux créer une animation de développement/réduction qui est alimentée uniquement par des noms de classe (javascript est utilisé pour basculer les noms de classe).

Je donne une classe max-height: 4em; overflow: hidden;

et l'autre max-height: 255em; (J'ai également essayé la valeur none, qui ne s'animait pas du tout)

ceci pour animer: transition: max-height 0.50s ease-in-out;

J'ai utilisé des transitions CSS pour basculer entre elles, mais le navigateur semble animer tous ces em supplémentaires, donc cela crée un retard dans l'effet d'effondrement.

Y a-t-il un moyen de le faire (dans le même esprit - avec les noms de classe CSS) qui n'a pas cet effet secondaire (je peux mettre un nombre de pixels inférieur, mais qui a évidemment des inconvénients, car il pourrait couper le texte légitime - c'est la raison de la grande valeur, donc il ne coupe pas le long texte légitime, seulement les ridiculement longs)

Voir le jsFiddle - http://jsfiddle.net/wCzHV/1/ (cliquez sur le conteneur de texte)

css3css-transitionscss-animations
38
Madd0g

Au cas où quelqu'un lirait ceci, je n'ai pas trouvé de solution et suis allé avec un effet de développement uniquement (qui a été obtenu en déplaçant le style transition vers la définition de classe développée)

5
Madd0g

Solution de délai fixe:

Mettez la fonction de transition cubique-bezier (0, 1, 0, 1) pour l'élément.

scss

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);

  &.full {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
  }
}

css

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

.text.full {
  max-height: 1000px;
  transition: max-height 1s ease-in-out;
}
58
egor.xyz

C'est une vieille question mais je viens de trouver un moyen de le faire et je voulais le coller quelque part, donc je sais où le trouver si j'en ai besoin à nouveau: o)

J'avais donc besoin d'un accordéon avec des divs "sectionHeading" cliquables qui révèlent/cachent les divs "sectionContent" correspondants. Les divs de contenu de section ont des hauteurs variables, ce qui crée un problème car vous ne pouvez pas animer la hauteur à 100%. J'ai vu d'autres réponses suggérant d'animer la hauteur maximale à la place, mais cela signifie parfois que vous obtenez des retards lorsque la hauteur maximale que vous utilisez est supérieure à la hauteur réelle.

L'idée est d'utiliser jQuery lors du chargement pour trouver et définir explicitement les hauteurs des divs "sectionContent". Ajoutez ensuite une classe css 'noHeight' à chacun un gestionnaire de clic pour le basculer:

$(document).ready(function() {
    $('.sectionContent').each(function() {
        var h = $(this).height();
        $(this).height(h).addClass('noHeight');
    });
    $('.sectionHeader').click(function() {
        $(this).next('.sectionContent').toggleClass('noHeight');
    });
});

Pour être complet, les classes CSS pertinentes:

.sectionContent {
    overflow: hidden;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.noHeight {
        height: 0px !important;
}

Maintenant, les transitions de hauteur fonctionnent sans aucun retard.

8
Will Jenkins

La solution est en fait assez simple. Faites un div enfant, qui a le contenu. Le div parent sera celui qui se dilate s'effondre.

Au chargement, le div parent aura une hauteur max. lors du basculement, vous pouvez vérifier la hauteur de l'enfant en écrivant document.querySelector('.expand-collapse-inner').clientHeight; et définir la hauteur maximale avec javascript.

Dans votre CSS, vous aurez ceci

.parent {
transition: max-height 250ms;
}
1
Johansrk