我想在單個序列中將多個元素從起始位置影片到結束位置（card0完成后，card1應該開始）。起始位置元素在不同的 Angular 組件中定義。卡片在Observable元素中定義，并且當前在您單擊按鈕時同時顯示。
在影像中，您可以看到card0應該從start底部card0元素移動。之后，同樣應該發生在card1，然后是card2
我目前只設法為可觀察元素設定影片。我想了解如何單獨為它們設定影片以及如何讓它們從另一個組件的起始位置流動。
這是一個StackBlitz
uj5u.com熱心網友回復：
這有點復雜，因為要將標簽從一個位置移動到另一個位置，您需要知道初始位置和最終位置。
想象一下，你有一個類似的影片：
animations:[
trigger('move',[
transition('false => true',[
style({ 'top': 0,'left':0 }),
animate('200ms', style({top:'*',left:'*'})),
])])
]
此影片將元素從絕對位置 0,0“移動”到元素真正具有的絕對位置。但是我們不想要帶有style={position:absolute}. 所以我們需要計算。為了計算，我們將獲取 ViewChildren 中的元素并使用變數來定位
@ViewChildren('card') cards:QueryList<ElementRef>
pos:any[]=[]
當影片開始時，我們將計算元素的位置。
startAnimation(){
this.pos=this.cards.map(x=>{
const rect=x.nativeElement.getBoundingClientRect();
return {
top:(window.scrollY rect.top) 'px',
left:(window.scrollX rect.left) 'px',
position:'absolute'
}
})
this.count=0;
}
然后我們將使用變數“count”，當影片完成時增加變數
animationDone(incr:number)
{
this.count =incr
if (this.count>3) //<--if the variable is the last animation
this.pos=this.pos.map(x=>null) //<--we equal to null the array "pos"
}
使用可見性隱藏和可見性可見，使“伎倆”
<div *ngFor="let item of obs$ | async; let i = index">
<div
#card
[ngStyle]="pos[i] || null"
[style.visibility]="i <= count ? 'visible' : 'hidden'"
[@move]="count == i"
(@move.done)="animationDone(count == i ? 1 : 0)"
>
{{ item }}
</div>
你可以在這個stackblitz中看到
注意：看到這個“奇怪” [@move.done]="animationDone(count == i ? 1 : 0)"，只有當 count==i 時才傳遞給函式 1，否則 Angular 執行這么多次元素具有可觀察的
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/353875.html