[英]How to animate ScrollTop with @angular/animations?
我正在嘗試從Material.io復制此動畫:
要像上面示例中第一張卡片上的點擊一樣導航高度很簡單。 只是動畫高度屬性。 問題在於點擊第二張卡然后將其他卡推開。
對此的一個解決方案是使用滾動來模擬事物被推開的效果。 因此,當您單擊該項目時,它通過設置高度動畫使其更高,但同時也滾動視圖。
我的問題:我似乎無法弄清楚如何使用@angular/animations
動畫滾動。 我不能使用style({ scrollTop: 100 })
,它只允許根據文檔的 CSS屬性。
我該如何實現這一目標? 如果我可以將其作為animate()
動畫的一部分用於維護原因(將整個動畫保存在代碼中的1個位置),那將是很好的,但如果它只能使用單獨的方法,我猜這是可以接受的好。
我設法創建了這個,使用三個Angular動畫狀態: small , big和normal ,對應div的高度:
animations.ts
在這里,我使用每個div的一個狀態變量作為示例,並且我默認將這些狀態中的每一個設置為正常 。 然后,根據我點擊的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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.