Web Animation APIのPolyfillでアニメーションプロパティを1つだけ指定するとエラーになる問題の対処法

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'
  }
)

これで、期待通りの動作をするはずです。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

上部へスクロール