MAX-hoogte animeren met CSS-overgangen

Ik wil een expand / collapse-animatie maken die alleen wordt aangedreven door classnames (JavaScript wordt gebruikt om de classnames te schakelen).

Ik geef één klas <max-height: 4em; overflow: hidden;

en de andere max-height: 255em;(Ik heb ook de waarde geprobeerd none, die helemaal niet heeft geanimeerd)

Dit om te animeren: transition: max-height 0.50s ease-in-out;

Ik heb CSS-overgangen gebruikt om tussen hen te schakelen, maar de browser lijkt al die extra em‘te animeren, dus het creëert een vertraging in het instrumenteffect.

Is er een manier om het te doen (in dezelfde geest – met CSS-classnames) die niet dat zijeffect heeft (ik kan een lagere pixel-telling plaatsen, maar dat heeft duidelijk nadelen, omdat het de legit kan afsnijden Tekst – dat is de reden voor de grote waarde, dus het snijdt geen LEGIT lange tekst, alleen belachelijk lange)

Zie de JSFiddle – http://jsfiddle.net/wczhv/1/ (klik op de tekstcontainer)

Antwoord 1, Autoriteit 100%

Versterking oplossingen oplossen:

PUT CUBIC-BEZIER (0, 1, 0, 1) overgangsfunctie voor element.

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

Antwoord 2, Autoriteit 9%

Dit is een oude vraag, maar ik heb net een manier uitgewerkt om het te doen en wilde het ergens vasthouden, dus ik weet waar ik moet vinden, moet ik het opnieuw nodig hebben: o)

Dus ik had een accordeon nodig met klikbare “sityheying” DIVS die de bijbehorende “SECTIELCONTENT” DIVS onthult / verbergen. De Section Content DIVS heeft variabele hoogten, die een probleem creëert, omdat u de hoogte niet kunt animeren tot 100%. Ik heb andere antwoorden gezien die in plaats daarvan het animeren van Max-Height suggereren, maar dit betekent soms dat je vertragingen krijgt wanneer de maximale hoogte die je gebruikt groter is dan de werkelijke hoogte.

Het idee is om jQuery op lading te gebruiken om de hoogten van de “sectioncontent” DIV’s uit te vinden en uitdrukkelijk te zetten. Voeg vervolgens een CSS-klasse ‘NOHEIGHT’ toe aan elke click-handler om het te schakelen:

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

Voor volledigheid, de relevante CSS-klassen:

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

Nu werken de hoogte-overgangen zonder vertragingen.

Antwoord 3, Autoriteit 3%

In het geval dat iemand dit aan het lezen is, heb ik geen oplossing gevonden en ging met een expand-only-effect (dat werd bereikt door de transitionStijl naar de uitgebreide klassedefinitie te verplaatsen)

Antwoord 4

De oplossing is eigenlijk vrij eenvoudig. Een kind div maken, dat heeft de inhoud. De ouder div wordt degene die instort wordt uitgezet.

On load the Parent Div zal een maximale hoogte hebben. Wanneer u het schakelt, kunt u de kinderhoogte controleren door document.querySelector('.expand-collapse-inner').clientHeight;en stel het MaxHeight in met JavaScript.

In uw CSS heeft u dit

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

Antwoord 5

Gebruik display: flex . Dit werkt:

.parent > div {
  display: flex;
  flex-direction: column;
  height: 0px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s;
}
.parent > div.active {
  opacity: 1; 
  height: 100%;
  max-height: none; /* important for animation */
}

Antwoord 6

U kunt dit prima uitvoeren met jQuery Transit :

$(function () {
    $(".paragraph").click(function () {
        var expanded = $(this).is(".expanded");
        if (expanded) 
        {
            $(this).transition({ 'max-height': '4em', overflow: 'hidden' }, 500, 'in', function () {$(this).removeClass("expanded"); });
        } 
        else 
        {
            $(this).transition({ 'max-height': $(this).get(0).scrollHeight, overflow: ''}, 500, 'out', function () { $(this).addClass("expanded"); });
        }
    });
});

Je kunt het zeker een beetje naar wens opruimen, maar dat zou moeten doen wat je wilt.

js fiddle demo