Avatar billede htx98i17 Professor
09. maj 2017 - 08:22 Der er 8 kommentarer og
1 løsning

CSS Transition height

Jeg har nedenstående kode-eksempel.
En hovedgruppe med undergrupper. Undergrupperne skal afsløres ved et klik på hovedgruppen. Antallet af undergrupper varierer og genereres af php.

Problemet er:
Hvordan får jeg transition til at fungere når jeg ikke kan bestemme height i pixels (antallet af undergrupper varierer) ?

Jeg vil gerne om det er muligt at holde løsningen i CSS.
Jeg har set på funktionerne i CSS men har ikke nok erfaring i at bruge det til at vide om der findes en løsning i CSS.

<!doctype html>
<html lang="da-DK" >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
           
            input { display: none; }
           
            ul {
                overflow:        hidden;
                height:        20px;
                transition:    height 1s;
            }
           
            input:checked + ul {
                height:        100px; /* ved '%' fungerer transition ikke. ved 'px' gør den. */
            }
           
        </style>

    </head>
   
<body>

<nav>
    <label>
        <input type="checkbox" >
        <ul>
            <li>Hovedgruppe</li> <!-- hovedgruppe -->
            <li>Undergrupper </li> <!-- Undergrupper - antallet varierer og generes af php-->
            <li>Undergruppe </li>
            <li>Undergruppe </li>
            <li>Undergruppe </li>
            <li>Undergruppe </li>
        </ul>
    </label>

</body>
</html>
Avatar billede htx98i17 Professor
09. maj 2017 - 12:08 #1
Jeg har forsøgt at bruge calc(counter(navn)*20px)) men det lader den ikke til at ville.
Avatar billede htx98i17 Professor
10. maj 2017 - 11:50 #2
Har jeg fået formuleret mig for kludret?
Avatar billede htx98i17 Professor
12. maj 2017 - 07:59 #3
Problemet er at få transition til at fungere på en height som ikke er defineret i pixels.

Men så har jeg fundet følgende som jeg tror på en eller anden måde beregner en højde i pixels. Jeg ved godt det er javascript, men nu søger jeg bare alle løsninger

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) { // en løkke starter og kører for hvert tegn i accordion
  acc[i].onclick = function() { // der køres en funktion for hver gang der klikkes på et tegn?
    this.classList.toggle("active"); //??
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}
</script>

kan nogen forklare linje for linje hvad der sker?
Avatar billede htx98i17 Professor
12. maj 2017 - 10:36 #4
Nu har jeg fundet ud af at eksemplet fungerer med procent hvis man definere position til alt andet end relative.

1. Kan nogen forklare hvorfor transition ikke fungerer på relative objekter?

Derudover så kan man ikke sætte transition til at stoppe med height: auto eller initial. Det er lidt træls, for så skal man alligevel have hjælp til at definere højden.

2. Jeg har ikke brug for at UL fylder hele siden, men kun så meget som indholdet fylder. Hvordan gør man det?

Følgende fungerer:
<!doctype html>
<html lang="da-DK" >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
           
            input { display: none; }
           
            ul {
                position:            absolute; /*fungerer ikke ved relative */
              overflow:            hidden;
              height:            20px;
              transition:        height 1s;
              background:        gray;
            }
           
            input:checked + ul {
               
                height:            100%; /*  fungerer ikke ved auto eller initial*/
            }
           
        </style>

    </head>
   
<body>

<nav>
    <label>
        <input type="checkbox" >
        <ul>
            <li>Hovedgruppe</li> <!-- hovedgruppe -->
            <li>Undergrupper </li> <!-- Undergrupper - antallet varierer og generes af php-->
            <li>Undergruppe </li>
            <li>Undergruppe </li>
            <li>Undergruppe </li>
            <li>Undergruppe </li>
        </ul>
    </label>

</body>
</html>
Avatar billede NielsErikP Mester
14. maj 2017 - 08:21 #5
Handler det om at sætte html tagget til position: relative....og så derudover bruge position absolute...
Prøv det :-)
Avatar billede NielsErikP Mester
14. maj 2017 - 08:22 #6
html tagget nav til position: relative
Avatar billede htx98i17 Professor
15. maj 2017 - 07:15 #7
Det laver desværre helt kludder i det. Så forsvinder menuen. Prøv du.
Avatar billede NielsErikP Mester
15. maj 2017 - 19:23 #8
Prøv lige at give et link til den menu...så den kan nydes IRL  :-)
Avatar billede htx98i17 Professor
16. maj 2017 - 16:25 #9
Der er ikke noget link til det, da siden ligger på mit skrivebord. Af den grund har jeg pastet hele sidekilden ind i spørgsmålet til hvis man selv vil afprøve løsningsforslag.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester