如何停止动画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（）方法会暂停播放动画。