Schriftrollbars während einer Animation verstecken

CSS kann immer noch nicht auf die automatische Größe animieren.

 .runterfallen {
  Übergang: 0,2s;
  Höhe: 0;
}
.dropdown.open {
  /* Die Höhe ändert sich, wird aber nicht animiert. */
  Höhe: Auto;
}

Sie können JavaScript -Tricks ausprobieren. Brandon Smith hat hier vor nicht allzu langer Zeit mehrere Techniken beschrieben. Ich habe an diese Lösung gedacht, weil sie sehr einfach ist:

 .runterfallen {
  Übergang: 0,2s;
  maximalhöhe: 0;
}
.dropdown.open {
  /*? */
  MAX-Hoch: 400px;
}

Jetzt, da wir diese magische Anzahl von 400px haben, ist sie wirklich nicht ideal. Die Tatsache, dass diese Methode funktioniert und so einfach ist, macht es jedoch äußerst attraktiv, dass ich sie immer in Produktionsumgebungen verwendet habe.

Aber magische Zahlen sind nicht das einzige Problem. Ein weiteres Problem ist die Scrollbar.

Wenn wir max-height: 0; wir brauchen auch overflow: hidden; Um sicherzustellen, dass das Dropdown -Menü tatsächlich versteckt ist, wenn sie geschlossen sind. Wenn das Dropdown -Menü geöffnet wird, sollten wir wahrscheinlich overflow: auto; Damit können wir den Inhalt nicht versehentlich abschneiden, wenn die natürliche Höhe des Dropdown-Menüs die erweiterte max-height überschreitet. Verwenden von overflow: auto; Löst dieses Problem, führt jedoch ein weiteres Problem ein: Während der Erweiterung werden in unserem Dropdown-Menü die Bildlaufleisten immer für mindestens einen Teil der Expansionszeit angezeigt, auch wenn sie für die endgültige Erweiterungshöhe nicht erforderlich sind. Das ist peinlich!

CSS -Tipps kommen, um zu retten.

Wir können immer noch overflow: auto; Im erweiterten Zustand müssen wir es nur während der Animation überschreiben. Wie wir im Great CSS -Spezifitätskampf gelernt haben, hat @keyframes die erstaunliche Fähigkeit, alles zu decken, während sie aktiv sind. Verwenden wir sie nicht für Animationen, sondern für diese versteckte Scrollbar -Funktion:

 .runterfallen {
  maximalhöhe: 0;
  Überlauf: versteckt;
  Übergang: maximale 1,2S-Leichtigkeit;
}
.dropdown.open {
  Überlauf: Auto;
  MAX-Hoch: 400px;
  Animation: SCROLL 1.2s rückwärts;
}
@keyframes verstecken scroll {
  von, zu {Überlauf: versteckt; }
}

Das ist alles!

Versuchen Sie, die Höhe auf einen kleineren Wert anzupassen, und sehen Sie, wie Sie die Bildlaufleiste während der Animation nicht sehen, sondern nur am Ende. Dies führt zu einem kleinen Jitter, wenn die Bildlaufleiste auftaucht, aber in meinem Fall ist es akzeptabel, da sie selten vorkommt. Wenn Sie Jitter unbedingt stoppen möchten, müssen Sie möglicherweise immer die (benutzerdefinierte) Scrollbar auf das Dropdown-Menü anwenden und den Stil der Bildlaufleiste während der Animation nach Bedarf anpassen.

Vielen Dank an Mr. Stephen Shaw von @keyframers für diesen Trick. Während ich an etwas an Codepen arbeitete, zog ich ihn, um mir bei der Lösung dieses Problems zu helfen. Wir haben uns entschlossen, diesen Trick in ein Codepen -Kanal -Video zu verwandeln, in dem wir den Zusammenarbeitsmodus angezeigt haben. Wir haben ihn verwendet, um das Problem/die Lösung zu finden:

Das obige ist der detaillierte Inhalt vonSchriftrollbars während einer Animation verstecken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!