Animation nach unten schieben von display:none zu display:block?

Lesezeit: 4 Minuten

Benutzer-Avatar
APAD1

Gibt es eine Möglichkeit, display:none mit CSS zu display:block zu animieren, sodass das versteckte div nach unten gleitet, anstatt abrupt zu erscheinen, oder sollte ich das anders angehen?

$(document).ready(function() {
    $('#box').click(function() {
        $(this).find(".hidden").toggleClass('open');
    });
});
#box {
    height:auto;
    background:#000;
    color:#fff;
    cursor:pointer;
}
.hidden {
    height:200px;
    display:none;
}
    .hidden.open {
        display:block;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
    Initial Content
    <div class="hidden">
        This is hidden content
    </div>
</div>

Und ein JSFiddle

  • mögliches Duplikat von Slide down und slide up div on click

    – TylerH

    19. Juni 2014 um 19:25 Uhr

  • @TheOneWhoPrograms Bei dieser Frage geht es nicht um jQuery oder onClick.

    – TylerH

    19. Juni 2014 um 19:26 Uhr

Benutzer-Avatar
Sündenfall

Ja, es gibt einen Weg:
http://jsfiddle.net/6C42Q/12/

Indem Sie CSS3-Übergänge verwenden und die Höhe manipulieren, anstatt die Eigenschaft anzuzeigen:

.hidden {
    height: 0px;
    -webkit-transition: height 0.5s linear;
       -moz-transition: height 0.5s linear;
        -ms-transition: height 0.5s linear;
         -o-transition: height 0.5s linear;
            transition: height 0.5s linear;
}

.hidden.open {
     height: 200px;
     -webkit-transition: height 0.5s linear;
        -moz-transition: height 0.5s linear;
         -ms-transition: height 0.5s linear;
          -o-transition: height 0.5s linear;
             transition: height 0.5s linear;
}

Mehr hier: Div beim Klicken nach unten schieben Pures CSS?

  • Funktioniert nicht. Ich versuche, auf den schwarzen Balken (anfänglicher Inhalt) zu klicken, und nichts passiert.

    – AlikElzin-kilaka

    21. Mai 2015 um 10:50 Uhr

  • Dies beantwortet nicht die ursprüngliche Frage der Animation von display: none zu display: block. Dies ist wichtig für die Zugänglichkeit, um sicherzustellen, dass sich versteckte Inhalte nicht im Tab-Index usw. befinden.

    – StueyKent

    5. Oktober 2017 um 14:00 Uhr

  • Wir müssen keinen Übergang zur Unterklasse hinzufügen, wenn die Hauptklasse ihn bereits hat

    – Nabel Khan

    27. Mai 2018 um 20:19 Uhr

  • Aber Sie müssen die Höhe kennen, um die Animation zu machen. und Sie wissen es nicht innerhalb des CSS.

    – Pavel Hasala

    26. Oktober 2019 um 20:42 Uhr

Da Sie bereits jQuery verwenden, ist es am einfachsten, slideDown() zu verwenden. http://api.jquery.com/slidedown/

Es gibt auch slideToggle().

Dann müssen Sie nicht alle browserspezifischen Übergangs-CSS manuell ausführen.

  • Ich baute das alles manuell, weil ich es irgendwie übersehen hatte slideDown(). DANKE.

    – aronmoshe_m

    5. November 2020 um 0:26 Uhr

Ich mag die Idee von CSS-Übergängen, aber es ist immer noch sehr sprunghaft. Manchmal muss die maximale Höhe aufgrund dynamischer Inhalte auf eine sehr hohe Zahl eingestellt werden, was den Übergang unbrauchbar macht, da er sehr sprunghaft ist. Also ging ich zurück zu jQuery, aber es hatte seine eigenen Fehler. Inline-Elemente sind sprunghaft.

Ich habe festgestellt, dass dies für mich funktioniert:

$(this).find('.p').stop().css('display','block').hide().slideDown();

Der Stopp stoppt alle vorherigen Übergänge. Das CSS stellt sicher, dass es als Blockelement behandelt wird, auch wenn dies nicht der Fall ist. Das Verbergen verbirgt dieses Element, aber jquery merkt es sich als Blockelement. und schließlich zeigt slideDown das Element, indem es nach unten geschoben wird.

  • Vielen Dank! Genau das, wonach ich gesucht habe 🙂 Wie kann ich es wieder hochschieben?

    – Gintás K

    4. Mai 2017 um 10:06 Uhr

  • Verwenden Sie wahrscheinlich slideUp anstelle von slideDown, vermute ich. $(this).find('.p').stop().css('display','block').hide().slideUp(); Oder können Sie slideToggle? $(this).find('.p').stop().css('display','block').hide().slideToggle();

    – Webmaster G

    5. Mai 2017 um 12:45 Uhr


  • Vielen Dank! eine einfache .stop().slideUp() hat funktioniert 🙂

    – Gintás K

    5. Mai 2017 um 13:00 Uhr

Wie wäre es mit

$("#yourdiv").animate({height: 'toggle'});

Toggle schaltet Ihr Div ein/aus, und die Animation sollte es von unten erscheinen lassen. In diesem Szenario benötigen Sie das spezifische CSS nicht, um es zu „verstecken“.

Wir können benutzen visibility: hidden zu visibility: visible Anstatt von display: none zu display: block Eigentum.

Siehe dieses Beispiel:

function toggleSlide () {
  const div = document.querySelector('div')
  
  if (div.classList.contains('open')) {
    div.classList.remove('open')
  } else {
    div.classList.add('open')
  }
}
div {
  visibility: hidden;
  transition: visibility .5s, max-height .5s;
  max-height: 0;
  overflow: hidden;
  
  /* additional style */
  background: grey;
  color: white;
  padding: 0px 12px;
  margin-bottom: 8px;
}

div.open {
  visibility: visible;
  /* Set max-height to something bigger than the box could ever be */
  max-height: 100px;
}
<div>
  <p>First paragraph</p>
  <p>Second paragraph</p>
</div>


<button
  onclick="toggleSlide()"
>
  toggle slide
</button>

Benutzer-Avatar
harda20599

Ich habe diese Problemumgehung für den Navigationskopf auf meiner React-Site durchgeführt.

Dies ist die normale sichtbare CSS-Klasse

.article-header {
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
}

Dies ist die Klasse, die an das div angehängt ist (wenn in meinem Fall gescrollt wird)

.hidden {
  top: -50px !important;
  transition: top 0.5s ease-in-out;
 }

Benutzer-Avatar
Rodrigo Zuluaga

Sie können auch verwenden

$('#youDiv').slideDown('fast');

oder Sie können sagen, dass das aktive div nach oben geht und das angerufene nach unten geht

$('.yourclick').click(function(e) {
       var gett = $(this).(ID);
       $('.youractiveDiv').slideUp('fast', function(){
        $('.'+gett).slideDown(300);
       });
});

Sowas in der Art.

1072480cookie-checkAnimation nach unten schieben von display:none zu display:block?

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

Privacy policy