PR
TIPS

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

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

この記事を書いた人
Naokazu Yokoo

エンジニア歴20年以上。現在はWeb / AI領域で活動中。
開発環境・サーバー環境ともに速度と効率性を追求しています。

Follow Naokazu Yokoo
Follow Naokazu Yokoo

Comment

タイトルとURLをコピーしました