Transition-Problem

J

jemand anders

Erfahrenes Mitglied
Hallo,

jemand eine Idee, warum Transition im Beispiel nicht funktioniert?

Freundl. Grüße

HTML: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transition</title>
    <style>
      .d1 {
        background: #f7f7f7;
        border: 1px solid #bbb;
        padding: 0px 10px;
      }
      p {
        background: #ccc;
        padding-left: 5px;
        width: 100%;
      }
      p:hover {
        cursor: pointer;
      }
      ul {
        background: #fff;
        border: 1px solid #ddd;
        max-height: initial;
        overflow: visible;
        padding-top: 10px;
        padding-bottom: 10px;
        transition: max-height 1.5s ease-in-out;
      }
      ul.hidden {
        border: transparent;
        max-height: 0;
        overflow: hidden;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div class="d1">
      <p class="p1" title="Klicken für Öffnen/Schließen">18.3.2025</p>
      <ul class="">
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
      </ul>
    </div>
    <script>
      const paragraphs = document.querySelectorAll("p");
      paragraphs.forEach((p) => {
        p.addEventListener("click", function () {
          p.nextElementSibling.classList.toggle("hidden");
        });
      });
    </script>
  </body>
</html>
 
So, ich habe noch ein wenig herumexperimentiert und nun eine Lösung gefunden. Die Frage ist: muss das wirklich so aufwändig gemacht werden?

HTML: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transition</title>
    <style>
      .d1 {
        background: #f7f7f7;
        border: 1px solid #bbb;
        padding: 0 10px;
      }
      p {
        background: #ccc;
        margin: 10px auto 0;
        padding-left: 5px;
        width: 100%;
      }
      p:hover {
        cursor: pointer;
      }
      li {
        max-height: 100px;
        overflow: visible;
        transition: all 500ms ease;
      }
      ul {
        background: #fff;
        border: 1px solid #ddd;
        margin: 10px auto;
        max-height: 1500px;
        opacity: 1;
        overflow: visible;
        transition: all 500ms ease;
      }
      li.hidden,
      ul.hidden {
        border: transparent;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
      }
      ul.hidden {
        margin-bottom: 0;
      }
    </style>
  </head>
  <body>
    <div class="d1">
      <p class="p1" title="Klicken für Öffnen/Schließen">18.3.2025</p>
      <ul class="">
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
        <li>
          <a href="https://www.tutorials.de/" rel="nofollow" target="_blank"
            >tutorials.de</a
          >
        </li>
      </ul>
    </div>
    <script>
      const paragraphs = document.querySelectorAll("p");
      paragraphs.forEach((p) => {
        p.addEventListener("click", function () {
          console.log(p.nextElementSibling);
          p.nextElementSibling.classList.toggle("hidden");
          p.nextElementSibling.querySelectorAll("li").forEach((l) => {
            l.classList.toggle("hidden");
          });
        });
      });
    </script>
  </body>
</html>
 
Feste Werte für die Höhe sind ein wenig unglücklich, ich ziehe das immer mit scrollHeight auf:
Code: 
<!DOCTYPE html>
<html lang="de">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transition</title>
    <style>
        .d1 {
            background: #f7f7f7;
            border: 1px solid #bbb;
            padding: 0px 10px;
        }

        p {
            background: #ccc;
            padding-left: 5px;
            width: 100%;
        }

        p:hover {
            cursor: pointer;
        }

        ul {
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid #ddd;
            overflow: hidden;
            /* padding-top: 10px;
            padding-bottom: 10px; */
            transition: height 1.5s ease-in-out;
        }

        ul>li:first-child {
            margin-top: 10px;
        }

        ul>li:last-child {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="d1">
        <p class="p1" title="Klicken für Öffnen/Schließen">18.3.2025</p>
        <ul class="">
            <li>
                <a href="https://www.tutorials.de/" rel="nofollow" target="_blank">tutorials.de</a>
            </li>
            <li>
                <a href="https://www.tutorials.de/" rel="nofollow" target="_blank">tutorials.de</a>
            </li>
            <li>
                <a href="https://www.tutorials.de/" rel="nofollow" target="_blank">tutorials.de</a>
            </li>
            <li>
                <a href="https://www.tutorials.de/" rel="nofollow" target="_blank">tutorials.de</a>
            </li>
            <li>
                <a href="https://www.tutorials.de/" rel="nofollow" target="_blank">tutorials.de</a>
            </li>
            <li>
                <a href="https://www.tutorials.de/" rel="nofollow" target="_blank">tutorials.de</a>
            </li>
            <li>
                <a href="https://www.tutorials.de/" rel="nofollow" target="_blank">tutorials.de</a>
            </li>
            <li>
                <a href="https://www.tutorials.de/" rel="nofollow" target="_blank">tutorials.de</a>
            </li>
            <li>
                <a href="https://www.tutorials.de/" rel="nofollow" target="_blank">tutorials.de</a>
            </li>
            <li>
                <a href="https://www.tutorials.de/" rel="nofollow" target="_blank">tutorials.de</a>
            </li>
            <li>
                <a href="https://www.tutorials.de/" rel="nofollow" target="_blank">tutorials.de</a>
            </li>
            <li>
                <a href="https://www.tutorials.de/" rel="nofollow" target="_blank">tutorials.de</a>
            </li>
        </ul>
    </div>
    <script>
        const paragraphs = document.querySelectorAll("p");
        paragraphs.forEach((p) => {
            const
                ul = p.nextElementSibling,
                hVisi = ul.scrollHeight + 'px';
            ul.style.height = hVisi;
            p.addEventListener("click", function () {
                ul.classList.toggle('hidden');
                if (ul.classList.contains('hidden')) {
                    h = '0';
                } else {
                    h = hVisi;
                }
                ul.style.height = h;
            });
        });
    </script>
</body>

</html>
 
Wieso? Die Werte, was die Höhe betrifft, sind nicht fest, sondern sie passen sich automatisch an die Höhe der Liste an.

Das mit Flex ist nur ein Überbleibsel weil ich ein Problem mit den Paddings hatte und hoffte, es damit lösen zu können. Habe dann aber margin-top und -bottom für die Listenelement genommen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück