如何使用@ angular/animations動畫ScrollTop？

我試圖從Material.io複製此動畫：如何使用@ angular/animations動畫ScrollTop？

要只是導航就像在上面的例子中的第一張牌上點擊的高度也很簡單。只是有生命的高度屬性。問題在於點擊第二張卡片，然後將其他卡片推開。

對此的一個解決方案是使用滾動來模擬事物被推開的效果。所以當你點擊這個項目時，它通過動畫高度使它更高，但同時也滾動視圖。

我的問題：我似乎無法弄清楚如何動畫滾動與@angular/animations。我不能使用style({ scrollTop: 100 })，它只允許根據documentation的CSS屬性。

我該如何做到這一點？如果我可以將它作爲animate()動畫的一部分（出於維護原因）（將整個動畫保留在代碼中的一個位置），那將會很好，但是如果只有一個單獨的方法纔可能，我想這也是可以接受的。

來源

2017-09-01 Marcus Lind

我設法創建此，使用三個角動畫指出：小，大和正常，對應於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

來源

2017-12-04 17:33:51

如何使用@ angular/animations動畫ScrollTop？

回答

相關問題