ng2動畫：如何更改狀態之間的css屬性

Question

我有一個具有三種動畫狀態的組件： hidden ， visible和switch 。 該組件從hidden開始，並且數據從API中提取。 API調用完成后，我將狀態設置為visible並且該組件出現。 如果用戶單擊該組件，該組件將消失，並且將從API加載新內容。 然后，該組件重新出現。

所有這一切。 但是我想要一種效果，即該組件始終從左側飛入並向右側飛出。 我使用translateX(-200%)和translateX(200%) translateX(0)進行此操作，當然還要為可見狀態進行translateX(0) 。 我將opacity從0更改為1，以獲得更好的效果。

問題：我需要組件在狀態switch和visible之間從200%變為-200% 。 否則，它將（在第一次之后）從右側而不是從左側飛入。 而且這不需要看到（不透明度保持為0）。

我嘗試過keyframes但沒有設法獲得清晰的動畫。 有沒有辦法在沒有過渡的情況下更改動畫（樣式集）的起點？

到目前為止，這是我的動畫代碼：

animations: [
  trigger('state', [
    state('hidden', style({opacity: 0, transform: 'translateX(-200%)'})),
    state('visible', style({opacity: 1, transform: 'translateX(0)'})),
    state('switch', style({opacity: 0, transform: 'translateX(200%)'})),
    transition('hidden => visible', animate('200ms 400ms ease-in-out')),
    transition('visible => switch', animate('200ms ease-in-out')),
    transition('switch => visible', [
      animate(400, keyframes([
        style({opacity: 0, transform: 'translateX(-200%)', offset: 0}),
        style({opacity: 1, transform: 'translateX(0)',     offset: 0.4})
      ]))
    ])
  ])
]
})

Answer 1

對於其他任何人，您都想知道：如果將樣式函數放入轉換函數中，則可以直接應用樣式。 像這樣：

  animations: [
    trigger('flyInAnimation', [
      state('hidden', style({transform: 'translateX(-100%)'})),
      state('visible', style({transform: 'translateX(0)'})),
      state('switch', style({transform: 'translateX(100%)'})),
      transition('hidden => visible', animate('200ms 400ms ease-in-out')),
      transition('visible => switch', animate('200ms ease-in-out')),
      transition('switch => visible', [
        style({opacity: 0, transform: 'translateX(-100%)'}),
        animate('200ms 600ms ease-in-out')
      ])
    ])
  ]

在上一個過渡中。

我遇到的問題是，當我從其他州刪除opacity屬性並僅在上一個過渡中直接應用它時，便可以看到中間的州，並且一切似乎都不干凈，並且工作正常消失了（以便從右移）看不到）。 顯然那里存在渲染問題。 現在一切正常。