Wie scrollt man ScrollTop mit @ angular / animations?
Ich versuche, diese Animation von Material.io:
zu replizieren 
Um einfach die Höhe zu navigieren, ist der Klick auf die erste Karte im obigen Beispiel einfach. Animiere nur das Höhenattribut. Das Problem ist mit dem Klick auf die zweite Karte, wo es dann die anderen Karten wegdrückt.
Eine Lösung besteht darin, mit scroll den Effekt zu simulieren, dass Dinge weggeschoben werden. Wenn Sie also auf das Objekt klicken, wird es durch die Animation der Höhe sowohl höher als auch gleichzeitig durch die Ansicht verschoben.
Mein Problem:
Ich kann nicht herausfinden, wie man Schriftrollen mit @angular/animations animiert.
Ich kann style({ scrollTop: 100 }) nicht verwenden, es erlaubt nur CSS-Attribute gemäß der Dokumentation .
Wie erreiche ich das? Es wäre schön, wenn ich es aus Wartungsgründen als Teil der animate() -Animation machen könnte (um die ganze Animation an einer Stelle im Code zu behalten), aber wenn es nur mit einer separaten Methode möglich ist, dann wäre das wohl akzeptabel gut.
1 Antwort
Ich habe es geschafft, dies mit drei Angular-Animationszuständen zu erreichen: klein , groß und normal , entsprechend der Höhe des div:
animations.ts
Hier habe ich als Beispiel eine Zustandsvariable pro Div verwendet, und ich setze jeden dieser Zustände standardmäßig auf normal . Dann, je nachdem, auf welches div ich klicke, wechsle ich die Zustände entsprechend dem, was wir wollen: indem wir das div machen, klicken wir auf größer und die anderen kleiner
%Vor%app.component.ts
%Vor%Und hier ist die entsprechende Vorlage:
Jedes Div hat den Verweis auf den Animationstrigger [@expand] und seinen Status.
Hier ist ein StackBlitz-Beispiel, das ich dafür gemacht habe: Ссылка
Tags und Links javascript angular css-animations angular-animations