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!