Web Animation APIのPolyfill(特にiOS 12など)を使用していて、アニメーションプロパティを1つだけ指定すると、エラーが発生し、コンソールに[object Object]
と出力される問題があります。
例えば、次のようなコードはエラーを引き起こします。
layer1.animate(
[
{ transform: 'none' }
],
{
fill: 'forwards',
duration: 3000,
easing: 'linear'
}
)
この問題を解決するためには、アニメーションプロパティを少なくとも2つ指定することです。例えば、次のように修正します。
layer1.animate(
[
{ transform: 'translateY(-100%)' },
{ transform: 'none' }
],
{
fill: 'forwards',
duration: 3000,
easing: 'linear'
}
)
これで、期待通りの動作をするはずです。