關於animateChild animation-timing-function 無效的問題

General
1

各位大大們大家好，

我最近研究animation的時候，關於parent、child的問題，

animateChild()底下的animation-timing-function失效的問題，

Code如下，

不曉得該如何解呢？

2

問題可以描述的更清楚嗎？

3

我大概知道你的問題了，你是不是想要用 cubic-bezier 來控制動畫的速度，
那如果是這樣子，那就不應該使用 keyframe，keyframe會把 cubic-bezier 的效果給取消掉

transition('0 <=> 1', [
        style({ opacity: 0, transform: 'scale3d(.1, .1, .1)'}),
        animate(`1000ms cubic-bezier(.25, .1, .25, 1)`,
          style({ opacity: 1, transform: 'scale3d(1, 1, 1)'})
        )
      ])

這樣的寫法，cubic-bezier 就會有效果了，你再試試看

2個讚
4

謝謝 Kevin大大，我有測試了不使用keyframe的方式，確實是可以的。

我想問這是因為animateChild()的關係嗎？

因為我不使用animateChild()的時候，就算有使用keyframe，cubic-bezier包含其他任何animation-timing-function都是正常的，

就像黃色方塊上面那樣是正常的，但是通過animateChild()時就是無法觸發任何animation-timing-function，所以這是因為目前的animateChild還在EXPERIMENTAL階段的BUG嗎？

5

根據 API 的說明，感覺好像是query造成的，
詳細的部分，建議上 github 或是 gitter 詢問。

1個讚