Wie zu animieren Umschalten der Zeilen?

Möchte ich animieren, die erscheinen und verschwinden der Zeilen.

Zunächst versuchte ich mit einem CSS - übergang, aber es Tat nichts, aufgrund der änderung der display Eigenschaft.

So, ich habe eine animation, die funktioniert wie erwartet.

Das problem ist, die volle Höhe der Zeile ist reserviert, wenn die animation beginnt. Siehe snippet unten für eine illustration des Problems: Zeile 3 nach unten, sofort, bevor die animation beginnt.

Wie kann ich animieren Sie die Höhe der Zeile schrittweise, so dass es dauert nur so viel Platz wie benötigt?

Und als bonus:

es sollte nicht erforderlich, eine Feste Höhe für Zeilen
es sollte angezeigt werden, wie eine übersetzung, sondern als eine Skalierung; es sollte so Aussehen, wie es Schiebe von unten die Zeile oben
es sollte bidirektionale (das Gegenteil tun, wenn ich es ausblenden)

JS:

$('button').on('click', function() {
  $('tr:nth-child(2)').toggleClass('active');
});

CSS:

@keyframes anim {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
tr {
  background: #eee;
  border-bottom: 1px solid #ddd;
  display: none;
  transform-origin: top;
}
tr.active {
  display: table-row;
  animation: anim 0.5s ease;
}
td {
  padding: 10px;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button type="button">Toggle</button>
<table>
  <tbody>
    <tr class="active">
      <td>Row 1</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr class="active">
      <td>Row 3</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Habe meine Antwort Ihnen geholfen? ... wenn Nein, kann ich etwas verbessern oder klären?
Sorry für die nicht feedback geben, früher war ich warten um zu sehen, wenn andere Menschen kommen mit alternativen Lösungen. Ich Schreibe meine Kommentare auf Ihre Antwort direkt.
Möglich, Duplikat der CSS3 übergang auf die Tabelle Zeile mit height-Eigenschaft

InformationsquelleAutor Benjamin | 2016-05-22

21

Als table row/cell nicht respektieren, eine height kleiner als der Inhalt, dann brauchen wir eine innere div können wir nicht animieren display und wir können nicht animieren height eingestellt auto, so dass ich hier eine Lösung mit max-height.

Der trick ist, zu geben max-height einen Wert, der hoch genug, um den höchsten Gehalt.

JS:
```
$('button').on('click', function() {
  $('tr:nth-child(2)').toggleClass('active');
});
```
CSS:
```
table {
  border-collapse: collapse;
}
tr {
  background: #eee;
  border-bottom: 1px solid #fff;
}
tr, td {
  padding: 0;
}
tr td div {
  max-height: 0;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: hidden;
  transition: max-height 0.3s, padding 0.3s;
}
tr.active td div {
  max-height: 100px;
  padding: 10px 10px;
  transition: max-height 0.6s, padding 0.6s;
}
```
HTML:
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button type="button">Toggle</button>
<table>
  <tbody>
    <tr class="active">
      <td><div>Row 1</div></td>
      <td><div>...</div></td>
      <td><div>...</div></td>
    </tr>
    <tr>
      <td><div>Row 2</div></td>
      <td><div>...</div></td>
      <td><div>...</div></td>
    </tr>
    <tr class="active">
      <td><div>Row 3</div></td>
      <td><div>...</div></td>
      <td><div>...</div></td>
    </tr>
  </tbody>
</table>
```
- Das ist besser als das, was ich kam mit, also danke für diese. Ich sehe nur 2 kleine Sachen könnten noch verbessert werden: die Tatsache, dass es nicht mit display richtig zu verstecken, es einmal vollständig zusammengebrochen ist (nicht sicher, wie wichtig dies ist, aber ich habe Angst vor älteren Browsern und Semantik: mit height:0 so blenden Sie ein element kann nicht sein, eine best practice); und die Tatsache, dass es schrumpft, statt zu schauen wie es ist und Schiebe von unten die Zeile oben, das wäre meine ideale Ziel!
- In Bezug auf ältere Browser, sollten Sie verwenden transition Sie sind bereits ausgeschlossen. Das ideale Ziel, um "slide" unten getan werden könnte, wenn height: 0 war in der Lage zu sein setzen auf die tr, wenn es nicht funktioniert, so dass, wenn Sie das wollen, müssen Sie löschen die table markup und verwenden div Reihen statt, und wenn man akzeptiert eine Feste Breite für jede Spalte (da die Verhalten sich nicht wie normale Zellen), die erreicht werden können.
- Nicht die Verwendung einer Tabelle ist nicht wirklich eine Lösung semantisch zu sprechen, wie es ist wirklich tabellarische Daten. Für ältere Browser, ohne übergang, Sie würde noch ein-und ausblenden, richtig, also ist das OK!
- Okay, lassen Sie mich wissen, wenn ich Sie Fragen und ich werde versuchen empfehlen eine passende Lösung.
- Ich denke, das ist es!
- Was fehlt, haben meine Antwort akzeptiert?
- Sind Sie in der Lage, um die Integration der vorgeschlagenen änderungen in meinem ersten Kommentar: display:none wenn Sie versteckt sind, und eine echte Gleit-Effekt?
- Es ist nicht möglich transist display: none und indem Sie es, machen es der übergang nicht arbeiten, aber Ihre sorgen über max-height: 0 in älteren browser, der es bis zum IE7, kann so nicht sehen, kein problem. Wenn es um die eigentliche slide-Effekt, müssen Sie absolute position, die nicht seine Eltern-die automatische Größenänderung zum Inhalt haben, benötigen Feste Höhe (oder ähnlich) ... also NÖ, kann nicht helfen mit, dass ... zu kommen über diese können Sie verwenden, jQuery, obwohl ältere browser-Unterstützung geben wird, Fragen gibt es auch.
- Ich habe auch wirklich denken, eine Antwort, die zeigt deutlich das Prinzip sollte gut genug sein, um akzeptiert zu werden.
- Ich akzeptiere die Antworten, zu gegebener Zeit 🙂 Danke für deine Hilfe, das werde ich tun ein bisschen mehr Forschung zuerst.
- Ich habe nie bedeutete, Sie wollte nicht akzeptieren, noch, wenn, das musste sein, .. hoffe, das ist klar 🙂
- bin auf diese mit ähnlichen problem. Es ist immer noch nicht wegen der Zeit oder was? Geben, dass der Kerl beantworten einige Liebe 😀
- Ich Schätze, dass ich nie akzeptiert, denn ich war nie wirklich zufrieden mit dem Ergebnis, insbesondere die Tatsache, dass es schrumpft statt zu rutschen. Aber wie es aussieht, gibt es keine bessere Lösung, wenn ich darauf bestehen, mit einem Tisch, so lassen Sie uns dies tun. Akzeptiert!
- Zu schätzen wissen, dass...danke.
InformationsquelleAutor LGSon
2

Wenn Sie die option zur Verwendung von CSS3 /Unterstützung von modernen Browsern könnten Sie mit einem transform:translateY übergangs-und ausblenden der überlauf mit overflow:hidden.

Tun, beachten Sie, dass Edge /IE nicht unterstützen, die übersetzen, wandelt auf dem Tisch-Elemente. Chrome unterstützt es.
- Danke, würde Ihnen ein Muster-code demonstriert diese?
InformationsquelleAutor Thierry van der Vloet

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.