如何停止動畫Javascript？

Question

將鼠標懸停在菜單上時，我想觸發動畫。 如果菜單不再溢出，我想停止它。

更正

     animeMiddle() {
            this.menu.addEventListener('mouseover', () => {
                  this.ctx = this.middle.animate([
                            {width: '0'},
                            {width: '100%'}
                        ],
                        {
                            duration: 1000, iterations: Infinity
                        })

            });
            this.menu.addEventListener('mouseout', () => {
                this.ctx.cancel();
            });
        }

Answer 1

您需要Animation.pause() 。

從MDN：

Web動畫API的“動畫”接口的pause（）方法會暫停播放動畫。