CSS3-Übergang zum Erweitern/Reduzieren hinzufügen

Lesezeit: 8 Minuten

CSS3 Ubergang zum ErweiternReduzieren hinzufugen
Felix

Wie füge ich einen Übergang zum Erweitern/Reduzieren hinzu?

function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID + '-show').style.display != 'none') {
            document.getElementById(shID + '-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        } else {
            document.getElementById(shID + '-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}
.more {
    display: none;
    padding-top: 10px;
}

a.showLink,
a.hideLink {
    text-decoration: none;
    -webkit-transition: 0.5s ease-out;
    background: transparent url('down.gif') no-repeat left;
}

a.hideLink {
    background: transparent url('up.gif') no-repeat left;
}
Here is some text.
<div class="readmore">
    <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a>
    <div id="example" class="more">
        <div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
        <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a></p>
    </div>
</div>

http://jsfiddle.net/Bq6eK/1

  • Abgesehen davon ist es anscheinend teuer, die Höheneigenschaft direkt zu animieren. Und stattdessen die Skalierung zu verwenden, ist komplex: developer.google.com/web/updates/2017/03/…

    – mtyson

    13. Januar 2020 um 21:57 Uhr

CSS3 Ubergang zum ErweiternReduzieren hinzufugen
Felix

Dies ist meine Lösung, die die Höhe automatisch anpasst:

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
  document.getElementById("more-button").value = document.getElementById("more-button").value == 'Read more' ? 'Read less' : 'Read more';
}
#more-button {
  border-style: none;
  background: none;
  font: 16px Serif;
  color: blue;
  margin: 0 0 10px 0;
}

#grow input:checked {
  color: red;
}

#more-button:hover {
  color: black;
}

#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
}
<input type="button" onclick="growDiv()" value="Read more" id="more-button">

<div id='grow'>
  <div class="measuringWrapper">
    <div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit
      amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>
  </div>
</div>

Ich habe die Problemumgehung verwendet, die r3bel gepostet hat: Können Sie CSS3 verwenden, um von der Höhe: 0 zur variablen Höhe des Inhalts überzugehen?

  • .measuringWrap ist unnötig. Sie können verwenden .growDivdie scrollHeight-Eigenschaft von jsfiddle.net/9ccjE/293

    – Guria

    31. August 2015 um 10:51 Uhr

  • Und dieser Übergang erfolgt über JS, aber nicht über CSS, wie in der Frage gestellt.

    – Igor Buts

    28. Dezember 2018 um 15:44 Uhr

  • @IgorButs Der Fragesteller hat normalerweise das Recht, sich für jede gewünschte Implementierung zu entscheiden.

    – TylerH

    1. April 2019 um 13:44 Uhr

  • Ich würde die Höhe nach einem Timeout von 0,5 ms beim Erweitern entfernen, um sicherzustellen, dass die Größe des div geändert wird, wenn sich die Fenster- oder Containergröße ändert.

    – Hansmaad

    8. Oktober 2020 um 14:57 Uhr

1647100927 586 CSS3 Ubergang zum ErweiternReduzieren hinzufugen
r3bel

Das sollte funktionieren, musste auch eine Weile probieren.. 😀

function showHide(shID) {
  if (document.getElementById(shID)) {
    if (document.getElementById(shID + '-show').style.display != 'none') {
      document.getElementById(shID + '-show').style.display = 'none';
      document.getElementById(shID + '-hide').style.display = 'inline';
      document.getElementById(shID).style.height="100px";
    } else {
      document.getElementById(shID + '-show').style.display = 'inline';
      document.getElementById(shID + '-hide').style.display = 'none';
      document.getElementById(shID).style.height="0px";
    }
  }
}
#example {
  background: red;
  height: 0px;
  overflow: hidden;
  transition: height 2s;
  -moz-transition: height 2s;
  /* Firefox 4 */
  -webkit-transition: height 2s;
  /* Safari and Chrome */
  -o-transition: height 2s;
  /* Opera */
}

a.showLink,
a.hideLink {
  text-decoration: none;
  background: transparent url('down.gif') no-repeat left;
}

a.hideLink {
  background: transparent url('up.gif') no-repeat left;
}
Here is some text.
<div class="readmore">
  <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a>
  <div id="example" class="more">
    <div class="text">
      Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet.
      Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </div>
    <p>
      <a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a>
    </p>
  </div>
</div>

  • Gut, aber wie vermeide ich es, die Höhe im Javascript festzulegen? Die Länge des Inhalts innerhalb der More-Klasse wird variieren.

    – Felix

    17. Juli 2012 um 0:46 Uhr

  • wie hier geschrieben ist dies atm nicht möglich (da du ja eine animation haben wolltest oder?) außer mit einem teuren workaround, der hier beschrieben wird

    – r3bel

    17. Juli 2012 um 1:18 Uhr

  • Ich habe Ihre jsfiddle erneut bearbeitet und eine “Problemumgehung” für die dynamische Höhe hinzugefügt, aber Sie müssen die Höhe des Dropdowns jedes Mal abrufen, wenn sich die Dropdown-Höhe mit Javascript ändert: jsfiddle. Ich garantiere Ihnen nicht, dass dies mit allen Browsern korrekt funktioniert 😀

    – r3bel

    17. Juli 2012 um 23:55 Uhr


  • Dies ist vielleicht nicht die beste Lösung, da es nicht reagiert. Bei Verwendung des CSS mit overflow: hidden es verbirgt den “verbergen”-Link.

    – J Gallardo

    22. Oktober 2015 um 20:05 Uhr

http://jsfiddle.net/Bq6eK/215/

Ich habe Ihren Code für diese Lösung nicht geändert, sondern meinen eigenen geschrieben. Meine Lösung ist nicht ganz das, wonach Sie gefragt haben, aber vielleicht können Sie mit vorhandenem Wissen darauf aufbauen. Ich habe den Code auch kommentiert, damit Sie wissen, was genau ich mit den Änderungen mache.

Als Lösung, um “das Festlegen der Höhe in JavaScript zu vermeiden”, habe ich gerade “maxHeight” zu einem Parameter in der JS-Funktion namens toggleHeight gemacht. Jetzt kann es im HTML für jedes div der Klasse erweiterbar gesetzt werden.

Ich sage das gleich vorweg, ich habe keine große Erfahrung mit Front-End-Sprachen, und es gibt ein Problem, bei dem ich zunächst zweimal auf die Schaltfläche „Anzeigen/Ausblenden“ klicken muss, bevor die Animation beginnt. Ich vermute, dass es ein Problem mit dem Fokus ist.

Das andere Problem mit meiner Lösung ist, dass Sie tatsächlich herausfinden können, was der versteckte Text ist, ohne die Schaltfläche zum Anzeigen / Ausblenden zu drücken, indem Sie einfach in das Div klicken und nach unten ziehen. Sie können den nicht sichtbaren Text hervorheben und in einen sichtbaren Bereich einfügen .

Mein Vorschlag für einen nächsten Schritt zusätzlich zu dem, was ich getan habe, ist, es so zu gestalten, dass sich die Schaltfläche zum Anzeigen / Ausblenden dynamisch ändert. Ich denke, Sie können mit dem, was Sie bereits über das Anzeigen und Ausblenden von Text mit JS zu wissen scheinen, herausfinden, wie das geht.

  • Ich habe zwei kleinere Änderungen vorgenommen: jsfiddle.net/Bq6eK/215. onclick="..." sollte false zurückgeben, und die Höhe sollte direkt für das Element festgelegt werden, nicht im CSS. Andernfalls muss man zweimal darauf klicken, um die Box zu öffnen, weil elem.style enthält nur Stile, die direkt für das Element festgelegt wurden, aber nicht die effektiven Stile.

    – kay

    17. Juli 2012 um 21:20 Uhr

OMG, ich habe stundenlang versucht, eine einfache Lösung dafür zu finden. Ich wusste, dass der Code einfach war, aber niemand stellte mir das zur Verfügung, was ich wollte. Also habe ich endlich an einem Beispielcode gearbeitet und etwas Einfaches gemacht, das jeder verwenden kann, ohne dass JQuery erforderlich ist. Einfaches Javascript und CSS und HTML. Damit die Animation funktioniert, müssen Sie die Höhe und Breite einstellen, sonst funktioniert die Animation nicht. Habe das auf die harte Tour herausgefunden.

<script>
        function dostuff() {
            if (document.getElementById('MyBox').style.height == "0px") {

                document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 200px; width: 200px; transition: all 2s ease;"); 
            }
            else {
                document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 0px; width: 0px; transition: all 2s ease;"); 
             }
        }
    </script>
    <div id="MyBox" style="height: 0px; width: 0px;">
    </div>

    <input type="button" id="buttontest" onclick="dostuff()" value="Click Me">

Hier ist eine Lösung, die JS überhaupt nicht verwendet. Es benutzt Kontrollkästchen stattdessen.

Sie können das Kontrollkästchen ausblenden, indem Sie dies zu Ihrem CSS hinzufügen:

.container input{
    display: none;
}

Und fügen Sie dann etwas Styling hinzu, damit es wie a aussieht Taste.

Hier ist der Quellcode, den ich modifiziert habe.

  • Die Lösung wendet keine Höhe entsprechend der Textmenge an. Im CSS müssen Sie die Höhe des überprüften div festlegen: .ac-container input:checked ~ article.ac-small{ height: 140px; } Ich brauche eine Lösung, die die Höhe entsprechend dem Inhalt anwendet.

    – Felix

    6. August 2012 um 22:40 Uhr

  • Die Lösung wendet keine Höhe entsprechend der Textmenge an. Im CSS müssen Sie die Höhe des überprüften div festlegen: .ac-container input:checked ~ article.ac-small{ height: 140px; } Ich brauche eine Lösung, die die Höhe entsprechend dem Inhalt anwendet.

    – Felix

    6. August 2012 um 22:40 Uhr

994250cookie-checkCSS3-Übergang zum Erweitern/Reduzieren hinzufügen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy