如何在 angular ngFor 中執行 animation 的序列

Question

背景

嘿，我目前正在嘗試使用 angular animation 為 svg 設置動畫，它有多個路徑，將來可能會更改，甚至可能會從服務腳本中動態添加，因此我使用了我的列表我在HTML中一一添加。 每條路徑代表一個字母。

問題

我需要向 svg 添加兩個動畫

• 將它們沖進沖出並用顏色填充它們。
• 在第一個 animation 結束后，使它們的一條路徑在對角線上連續不停地移動。 這些任務中的每一項都是我單獨完成的，並且按預期工作得很好，即使在一起，它們也都按預期工作，除了我不能讓第二個 animation 無休止並繼續下去。

我已經嘗試過和做過的事情

• 我嘗試添加兩個觸發器，一個觸發器用於整個路徑列表，另一個觸發器僅用於我想要移動的那個路徑，但它導致只顯示該路徑而不顯示任何其他路徑。

    const listAnimation = trigger('listAnimation', [
      transition('* <=> *', [
        query(':enter',
        [ 
          style({
                  'stroke-dashoffset': "647", 
                  fill:"#ff000000"
                }),
          stagger('60ms',
                  animate('4500ms ease-out', 
                          style({'stroke-dashoffset': "0", fill:'green'})
                          )
                  )
        ]
        ),
        query('#p2',
        [ 
          style({
                  transform: 'translate(0px, 0px)'
                }),
          stagger('60ms', 
                  animate('1500ms ease-out', 
                          style({transform: 'translate(-25px, -25px)'})
                          )
                  )
        ]
        )
      ])
    ]);

HTML

    <svg *ngIf="show2" id="Logo" [@listAnimation]="pathes.length" width="100%" height="100%" viewBox="-30 -30 765 264" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path *ngFor="let path of pathes; index as i" id={{path.id}} attr.d={{path.d}} stroke="#737373" stroke-width="5" />
    </svg>

• 我嘗試使用標志來指示 animation 的結束和開始，但它導致啟動整個序列而不僅僅是移動部分。

我想要什么和期望什么

任何允許我一個接一個地完成上述兩個動畫並無休止地重復第二個動畫的方式。

代碼

這是我到目前為止所做的我的StackBlitz代碼，請隨時編輯。

• 注意：在 chrome 上效果最好。

Answer 1

事實證明，我需要做的就是從我在“組”中所做的兩個查詢中添加兩個查詢 *請參閱此鏈接“Angular Group”以使其 go 彼此並行。 或者只是在包含“svg 和路徑”的 div 上創建一個新觸發器，然后在第一個 animation 之后創建一個新的 animation const 調用它，這將使其一個接一個地發生“參見此鏈接“角度動畫” endless loop all is to make a function that is called when the animation ends which in return will result in changing the state which will restart the animation again and so on " See this link "Angular triggers" and This Example