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

问题描述：

我试图从Material.io复制此动画：如何使用@ angular/animations动画ScrollTop？

要只是导航就像在上面的例子中的第一张牌上点击的高度也很简单。只是有生命的高度属性。问题在于点击第二张卡片，然后将其他卡片推开。

对此的一个解决方案是使用滚动来模拟事物被推开的效果。所以当你点击这个项目时，它通过动画高度使它更高，但同时也滚动视图。

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

我该如何做到这一点？如果我可以将它作为animate()动画的一部分（出于维护原因）（将整个动画保留在代码中的一个位置），那将会很好，但是如果只有一个单独的方法才可能，我想这也是可以接受的。

答

我设法创建此，使用三个角动画指出：小，大和正常，对应于div的高度：

animations.ts

这里，我使用了每个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有到其中的参考e动画触发器[@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？

相关推荐