如何使用@angular/animations 为ScrollTop 设置动画？

Question

我正在尝试从 Material.io:

复制这个动画

如上例中点击第一张卡片那样导航高度很简单。只是动画高度属性。问题在于点击第二张卡片然后将其他卡片推开。

一个解决方案是使用滚动来模拟事物被推开的效果。因此，当您单击该项目时，它既通过动画高度使它变高，又同时滚动视图。

我的问题：我似乎无法弄清楚如何使用 @angular/animations 制作动画卷轴。我不能使用 style({ scrollTop: 100 })，它只允许根据 documentation.

使用 CSS 属性

我该如何实现？如果出于维护原因我可以将它作为 animate() 动画的一部分来做（为了将整个动画保持在代码中的 1 个位置），那就太好了，但是如果只能使用单独的方法，我想那将是也可以接受。

Answer 1

我设法创建了这个，使用了三个 Angular 动画状态：small、big 和 normal，对应的高度是div：

animations.ts

在这里，我以每个 div 使用一个状态变量为例，我将这些状态中的每一个默认设置为 normal。然后，根据我点击的 div，我根据我们想要发生的事情切换状态：使 div 我们点击更大和其他更小

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;
      }
    }
  }
}

这是相应的模板：

每个 div 都有对动画触发器 [@expand] 及其状态的引用。

<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>

这是我为此制作的 StackBlitz 示例：https://stackblitz.com/edit/angular-t47iyy

如何使用@angular/animations 为ScrollTop 设置动画？

How to animate ScrollTop with @angular/animations?

javascript

angular

css-animations

angular-animations