由于更新了animejs，我的javascript不再起作用答案

【问题标题】：Since updating animejs my javascript no longer functions由于更新了animejs，我的javascript不再起作用
【发布时间】：2019-12-23 12:17:30
【问题描述】：

基本上我在单击导航按钮时触发了“animejs”动画，然后在第二次单击后相同的动画会反转。它会切换。现在更新animejs后这不再有效。

我尝试过使用变量，例如 var 播放 = 真；并在它之间切换，但它不具备与以前相同的功能。

代码看起来像这样（这是简化的）

var navAnimation = anime.timeline({
duration: 100,
});

animation.add({
targets: 'navStuff'
//animation would be here
});

document.querySelector('.nav').onclick = () => {
animation.play();
// animation.play still functions properly
animation.reverse();
// animation.reverse(); is broken
};

//before the update you could simply place a two methods within the onclick function and it would toggle between them but that no longer is the case with animejs

我想要发生的是能够使用单个目标（按钮）来打开我的导航并关闭它（在两种状态之间切换）。我希望能够向按钮发送垃圾邮件，而不是看到和出现故障（和以前一样）。

【问题讨论】：

标签： javascript reactjs user-interface animation anime.js

【解决方案1】：

请相信我，我花了很多时间试图让这个工作正常进行，但它只是拒绝让步。

我尝试过使用高度/变换/颜色、可变差异、仔细检查。没有任何效果。

这就是我现在为“反转”设置动画的方式：

const notificationsContainerElement = document.querySelector('#demo-install-notifications-container');

let notificationsContainerAnimation = anime({
    targets: notificationsContainerElement,
    height: '350px',
    easing: 'easeOutElastic(1.5, .5)',
    duration: 1500,
    delay: 0,
    autoplay: false,
});

notificationsContainerElement.addEventListener('click', () => {
    if(notificationsContainerAnimation.began === false) {
        notificationsContainerAnimation.play();
    } else if(notificationsContainerAnimation.began === true) {
        notificationsContainerAnimation.began = false;
        anime({
            targets: notificationsContainerElement,
            height: '100px',
            easing: 'easeOutElastic(1.5, .5)',
            duration: 1500,
            delay: 0,
        });
    }
});

我的第一个动画是autoplay: false，然后，当我单击一个元素时，我会.play() 那个动画，但请注意检查原始动画的began。在动画上点击播放后，began 属性会不断变化。

对...

但是在我的动画上做notificationsContainerAnimation.reverse()无论如何都行不通。它只是没有。 我坚信这与动漫无法达到它应该实际反转的位置有关 - 价值观。

逻辑是合理的，没有办法为什么它不应该工作......但它没有。

所以，现在，使用 2 个动画。

【讨论】：