Comment animer ScrollTop avec @ angular/animations?

Question

Je suis en train de reproduire cette animation à partir Material.io:

Pour naviguer simplement la hauteur comme le clic sur la première carte dans l'exemple ci-dessus est simple. Juste animez l'attribut de taille. Le problème est avec le clic sur la deuxième carte où il repousse alors les autres cartes.

Une solution à ceci est d'utiliser scroll pour émuler l'effet que les choses sont repoussées. Ainsi, lorsque vous cliquez sur l'élément, il le rend plus grand en animant la hauteur, mais aussi en faisant défiler la vue en même temps.

Mon problème: Je n'arrive pas à comprendre comment animer les parchemins avec @angular/animations. Je ne peux pas utiliser style({ scrollTop: 100 }), il ne permet que les attributs CSS selon le documentation.

Comment puis-je y parvenir? Ce serait bien si je pouvais le faire dans le cadre de l'animation animate() pour des raisons de maintenance (pour garder l'animation entière dans 1 emplacement dans le code), mais si c'est seulement possible avec une méthode séparée, cela serait acceptable.

Answer 1

j'ai réussi à créer ce, en utilisant trois animations angulaires états: petits, grand et normale, ce qui correspond à la hauteur de la div:

animations.ts

ici , J'ai utilisé une variable d'état par div comme un exemple, et je définis chacun de ces états à normal par défaut. Ensuite, selon le div je clique, je basculer les états selon ce que nous voulons arriver: faire la div nous cliquons sur plus et les autres plus petits

export const expand = [ 
    trigger('expand', [ 
    state('big', style({ 
     'height': '200px' 
    })), 
    state('normal', style({ 
     'height': '100px' 
    })), 
    state('small', style({ 
     'height': '50px' 
    })), 
    transition('* => *', [group([ 
     animate(1000) 
    ] 
    )]) 
    ]), 
] 

app.component. ts

import { expand } from './animations'; 

@Component({ 
    ... 
    animations: [expand] 
}) 
export class AppComponent implements OnInit { 
    expandState1 = 'normal'; 
    expandState2 = 'normal'; 
    expandState3 = 'normal'; 
    expandState4 = 'normal'; 
    expandState5 = 'normal'; 

    ngOnInit() { 
    this.resetStates(); 
    } 

    resetStates() { 
    this.expandState1 = 'normal'; 
    this.expandState2 = 'normal'; 
    this.expandState3 = 'normal'; 
    this.expandState4 = 'normal'; 
    this.expandState5 = 'normal'; 
    } 

    toggleShowDiv(divName: string) { 
    if (divName === 'div1') { 
     if (this.expandState1 === 'normal' || this.expandState1 === 'small') { 
     this.setToBig([1]); 
     this.setToSmall([2, 3, 4, 5]); 
     } else if (this.expandState1 === 'big' || this.expandState1 === 'small') { 
     this.resetStates(); 
     } 
    } else if (divName === 'div2') { 
     if (this.expandState2 === 'normal' || this.expandState2 === 'small') { 
     this.setToBig([2]); 
     this.setToSmall([1, 3, 4, 5]); 
     } else if (this.expandState2 === 'big') { 
     this.resetStates(); 
     } 
    } else if (divName === 'div3') { 
     if (this.expandState3 === 'normal' || this.expandState3 === 'small') { 
     this.setToBig([3]); 
     this.setToSmall([1, 2, 4, 5]); 
     } else if (this.expandState3 === 'big') { 
     this.resetStates(); 
     } 
    } else if (divName === 'div4') { 
     if (this.expandState4 === 'normal' || this.expandState4 === 'small') { 
     this.setToBig([4]); 
     this.setToSmall([1, 2, 3, 5]); 
     } else if (this.expandState4 === 'big') { 
     this.resetStates(); 
     } 
    } else if (divName === 'div5') { 
     if (this.expandState5 === 'normal' || this.expandState5 === 'small') { 
     this.setToBig([5]); 
     this.setToSmall([1, 2, 3, 4]); 
     } else if (this.expandState5 === 'big') { 
     this.resetStates(); 
     } 
    } 
    } 

    setToSmall(choices: any) { 
    for (let i = 0; i < choices.length; i++) { 
     switch (choices[i]) { 
     case 1: 
      this.expandState1 = 'small'; 
      break; 
     case 2: 
      this.expandState2 = 'small'; 
      break; 
     case 3: 
      this.expandState3 = 'small'; 
      break; 
     case 4: 
      this.expandState4 = 'small'; 
      break; 
     case 5: 
      this.expandState5 = 'small'; 
      break; 
     default: 
      break; 
     } 
    } 
    } 

    setToBig(choices: any) { 
    for (let i = 0; i < choices.length; i++) { 
     switch (choices[i]) { 
     case 1: 
      this.expandState1 = 'big'; 
      break; 
     case 2: 
      this.expandState2 = 'big'; 
      break; 
     case 3: 
      this.expandState3 = 'big'; 
      break; 
     case 4: 
      this.expandState4 = 'big'; 
      break; 
     case 5: 
      this.expandState5 = 'big'; 
      break; 
     default: 
      break; 
     } 
    } 
    } 
} 

Et voici le modèle correspondant:

Chaque div a la référence à th Le déclencheur d'animation [@expand] et son état.

<div class="wrapper scrollableDiv"> 
    <div [@expand]="expandState1" (click)="toggleShowDiv('div1')" class="content divA">THIS IS CONTENT DIV 1</div> 
    <div [@expand]="expandState2" (click)="toggleShowDiv('div2')" class="content divA">THIS IS CONTENT DIV 2</div> 
    <div [@expand]="expandState3" (click)="toggleShowDiv('div3')" class="content divA">THIS IS CONTENT DIV 3</div> 
    <div [@expand]="expandState4" (click)="toggleShowDiv('div4')" class="content divA">THIS IS CONTENT DIV 4</div> 
    <div [@expand]="expandState5" (click)="toggleShowDiv('div5')" class="content divA">THIS IS CONTENT DIV 5</div> 
</div> 

Voici un exemple StackBlitz je fait pour cela: https://stackblitz.com/edit/angular-t47iyy