Kann ich das anwenden einer CSS-übergang in die overflow-Eigenschaft?

Ich versuche transition-delay zu den overflow Eigenschaft von body wenn ein div geklickt wird, durch das hinzufügen einer Klasse zur body wie folgt:

JS:

$("div").click(function(){
    $("body").addClass("no_overflow");
});

CSS:

div{
  background:lime;
  height:2000px;
}
.no_overflow{  
 overflow:hidden;
}
body{  
  overflow:auto;
  transition: overflow 0 2s;  
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>

Jedoch, dies scheint nicht zu funktionieren (es gibt keine Verzögerung). Mache ich etwas falsch hier?

Ich weiß, dies kann erreicht werden, indem setTimeout Funktion, aber Frage mich, warum kann das nicht erreicht werden, mithilfe von css-transitions? Gibt es bestimmte Stil-Eigenschaften zu, die css-übergänge angewendet werden kann?

  • Es fiel mir ein, dass, als eine alternative, Sie könnten den übergang der height eher als die overflow Eigenschaft zu erreichen, in etwa das gleiche Aussehen.
  • Ja, das kann ausprobiert werden. Aber man muss aufpassen, dass der browser die Höhe in Ordnung, dies zu tun. Auch, dass nicht beschneiden Sie das Fenster in der gleichen Weise, wenn overflow ist hidden. Jedenfalls landete ich mit setTimeout. 😉
InformationsquelleAutor Nikunj Madhogaria | 2015-01-12
  1. 45

    Gibt es viele Eigenschaften, die können nicht umgestellt werden. overflow ist unter Ihnen; der render-engine hat keine Ahnung, wie der übergang zwischen "hidden" und "angezeigt", weil diese sind binäre Optionen, nicht Abständen. Dies ist der gleiche Grund, warum Sie nicht den übergang zwischen display: none; und display: block; (zum Beispiel): es gibt keine in-zwischen den Phasen zu nutzen, übergänge.

    Können Sie eine Liste der Eigenschaften, die Sie animieren können hier auf Mozilla Developer Network.

    InformationsquelleAutor TylerH
  2. 16

    Können Sie simulieren eine Verzögerung mit animation:

    JS:

    $("div").click(function() {
  $("body").addClass("no_overflow");
});

    CSS:

    div {
  background: lime;
  height: 2000px;
}

.no_overflow {
  overflow: hidden;
  /* persist overflow value from animation */
  animation: 7s delay-overflow;
}

body {
  overflow: auto;
}

@keyframes delay-overflow {
  from { overflow: auto; }
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm div</div>

    Müssen Sie separate animation .body wenn Sie wollen, eine Verzögerung, die auf removeClass, und auch darauf zu achten, dass die Animationen nicht überschneiden oder Sie heben sich gegenseitig auf.

    • Super!!! Ich war auf der Suche nach einem Weg zu verbergen die Bildlaufleiste auf ein modal-container, bis der fade-in-übergang von einer modalen abgeschlossen wurde. Etwas hacky, aber das Tat den trick.
    InformationsquelleAutor Dmitry
  3. 8

    überlauf nicht CSS animierbare property. Sie können die vollständige Liste finden Sie auf der animierbar CSS-Eigenschaften es.

    InformationsquelleAutor Evgeny Samsonov
  4. 1

    Macht es Sinn, dass man nicht den übergang zwischen Binär-Attributen Beispiel overflow: hidden; und overflow: visible aber es wäre wirklich schön gewesen, wenn anstelle von "übergang" dann wäre es wie (in js-pseudo-code: 

    setTimeout("applyOverflowVisible()", transitionTime);

    Aber natürlich können Sie tun dies selbst in JavaScript, aber dann sind Sie die Aufteilung der code zwischen den Orten und es kann es schwierig machen zu verstehen, der von jemand anderem. Ich denke, mit Dingen wie Reagieren hilft aber auch da würde ich wollen, um zu vermeiden mischen von css in die js.

    InformationsquelleAutor OZZIE
Schreibe einen Kommentar