Übergang von flex-grow-Elemente in einer flexbox
Ist es möglich, um den übergang der Elemente in einer flexbox?
Wenn Sie klicken Sie auf ich möchte, dass alle Elemente, die zu kollabieren, außer der, auf die geklickt wird.
Die eine, die angeklickt wird, sollten alle zur Verfügung stehenden Platz aus dem container.
JS:
//only works once!
$(".item").click(function() {
$(".item").not(this).each(function() {
$(this).addClass("collapse");
});
});
CSS:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
.container {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
display: flex;
flex-direction: column;
height: 100%;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
transition: all 2s;
}
.collapse {
flex-grow: 0;
}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item" style="background: red">a</div>
<div class="item" style="background: green">b</div>
<div class="item" style="background: blue">c</div>
<div class="item" style="background: purple">d</div>
</div>
JSFiddle: http://jsfiddle.net/clankill3r/L8hktsgn/
- Wie fügen Sie ein code-snippet?
- Sie können übergang
flex-grow
ab/bis 0. oli.jp/2010/css-animiert-Eigenschaften - "Stack Exchange Blog: Einführung in Ausführbarer JavaScript -, CSS-und HTML-Code-Schnipsel".
- Könnte mir jemand sagen, warum die jQuery-animate-Methode funktioniert nicht in diesem Fall?
Du musst angemeldet sein, um einen Kommentar abzugeben.
flex-grow
ist animierbar aber nur, wenn der Wert eine<number>
. Aber es scheint, dass Google Chrome (v41) wird nicht ausgelöst, die animation, wenn der Wert festgelegt ist0
.Einen workaround dafür könnte die Verwendung eines sehr kleinen Wert, anstatt — so etwas wie
0.0001
:Aktualisiertes Beispiel.
JS:
CSS:
HTML:
transition-timing-function
ignoriert beim übergangflex-grow
(ich kann nicht wirklich sagen, ein Unterschied zwischen den easings)?cubic-bezier(0.19, 1.41, 0.54, -0.43)
als timing-Funktion.flex-grow
soll animierbar nach den spec; Wenn IE11 nicht umzusetzen, das ist Ihre Schuld, nicht die spec noch die Antwort.flex-grow
< 1.flex-grow
>1, aber kein Glück. Scheint IE11 nicht unterstützt das animieren dieser Eigenschaft.und animieren Sie die flex-grow von 20 bis 1
http://jsfiddle.net/L8hktsgn/11/
Können Sie arbeiten mit
max-height
.http://jsfiddle.net/L8hktsgn/9/
Wenn Sie möchten, dass nur eine Zeile dieser arbeiten konnte https://codepen.io/balvin/pen/gKrXdM aber wenn Sie wollen, wickeln Sie Sie verwenden konnte, https://codepen.io/balvin/pen/wXGyYw
Scheint, dass es ein hack, aber die Einstellung
width:0;flex-grow:1
es ist die Lösung, aber um zu wickeln Sie die Elemente, müssen Sie ausdrücklich sagenwidth
an den browser, weil Sie nicht wissen, in welcher Breite Sie möchten die elemements zu wickeln, und mit diesem im Verstand, den Sie spielen einfach mit setTimeout. Überprüfen Sie die codes