【JavaScript】アニメーション完了後にstyleの一部を変更する方法

以下のように記述するとアニメーション完了後に一部のstyleを更新できます。

const animation = element.animate(
  [
    { height: '0px', width: '100px' },
    { height: '200px', width: '100px' },
  ],
  {
    duration: 200,
    easing: 'ease-out',
    fill: 'forwards',
  }
)
// アニメーションの完了を待つ
animation.finished.then(() => {
  animation.commitStyles()  // アニメーション完了時のスタイルをstyle属性に反映
  animation.cancel()  // アニメーションをキャンセル
  element.style.height = 'auto'  // style の height を auto に変更
})

animation.commitStyles（）を実行してstyle属性に完了時のスタイルを反映します。

animation.cancel()しないとアニメーション完了時のheight: '200px'が優先されてしまいます。