CSS -Gitter kann automatische Höhenübergänge durchführen

CSS -Tipps! Nelson Menezes hat einen neuen Ansatz entdeckt (derzeit nur in Firefox funktioniert), was sehr klug ist.

Sie wissen vielleicht, dass CSS die automatische Größe nicht animieren kann, was sehr unglücklich ist. Von der Null -Animation bis zur "Nachfragegröße" ist in vielen Fällen sehr nützlich. Wir haben die verfügbaren Technologien dokumentiert. Sie kochen zu:

• max-height auf einen größeren Wert animieren als Sie benötigen, was die Zeit für ungenau und nicht glatt lockert.
• Verwenden Sie JavaScript, um die endgültige Größe zu messen und zu beleben, was bedeutet, dass ... JavaScript verwenden.

Nelsons Technologie ist weder diese noch ein konversionsbasierter Ansatz, der visuelle Unbeholfenheit hat. Dieser Technologie -Kern verwendet CSS -Netz ...

 .expander {
  Anzeige: Grid;
  Grid-Template-Reihen: 0fr;
  Übergang: Raster-Template-Reihen 1s;
}

.expander.expanded {
  Grid-Template-Reihen: 1FR;
}

Unglaublich, in Firefox wechselt dieser Übergang zwischen Inhalten innerhalb dieses Gebiets von 0 zur natürlichen Höhe des Inhalts. Machen Sie einfach ein wenig zusätzliche Arbeit wie das Verstecken von Überläufen und Sichtbarkeit, damit sie richtig aussehen und die Barrierefreiheit beibehalten:

Das ist großartig. Lassen Sie uns zu diesem Thema etwas Aufmerksamkeit erhalten, und vielleicht übernimmt Chrome es auch. Aber natürlich wäre es besser, wenn der automatische Höhenübergang mit dem Laufen beginnt. Ich kann mir nicht vorstellen, dass dies völlig unmöglich ist.

Das obige ist der detaillierte Inhalt vonCSS -Gitter kann automatische Höhenübergänge durchführen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!