Javascript 在动画期间防止动画

我正在尝试制作一个动画，一切正常，但我似乎无法阻止用户在动画中单击并破坏页面布局。 我已经设法在div移动时停止用户，但无法防止一个div被扩展

这是我的小提琴：

---

看起来您已经在尝试修复该问题时添加了大量代码。我也有点困惑这个问题是什么，因为您的JSFIDLE在动画中单击不会给我带来麻烦。也许你说的只是某些情况

不管怎样，我都看到了

$(document).click(function() {
    animating = false;
    if(animating == false) {
        clickedDiv.css('z-index', '1');
        clickedDiv.find(".inner_package").css('transition', 'all 2s ease-in');
        clickedDiv.find(".inner_package").css('width', '60px');
        animating = false;
    }
});

动画=错误；if语句之前和if语句函数内部似乎都是多余的，我怀疑其中一个函数需要读取animating=true；让我知道这是否解决了你的问题

更新：虽然我不理解动画本身，但我可以这么说。您可以使用动画作为控件来控制多个正在运行的动画。你有一个陈述，似乎这可能是你的问题

if(animating == false) {
animating = true;
//do stuff
animating = false;
}

这可能是你的问题。尝试获取更具体的逻辑。像

if(animatingOne == false && animatingTwo == false && animatingThree == false) {
//logic to find out which animation is triggered
//turn the appropriate animation variable to true
//turn if off when done
}

---

如果这不起作用，继续玩逻辑游戏。我怀疑单变量动画无法适应您所做工作的复杂性。

也许您应该立即制作动画？但是，CSS动画不起作用。问题是当一个div展开时，以及当您在该div外单击时。在收缩期间，问题就出现了。如果在收缩第一个div时单击sec。为ex设置div。他们尝试为两者设置动画。如果我将动画设置“假”更改为“真”，我根本无法缩小它@GooseI认为你的问题不在于动画中的点击。看看这个。单击最右边的div，等待动画结束，然后单击新的最右边的div。等待几秒钟，您将看到一些有趣的行为。它是一个只运行一次的动画，还是用户可以继续单击并与div交互？在收缩期间单击div时，我设法解决了这个问题。现在的问题是只有一次。检查更新的小提琴我想我看到了其他问题，但我可能不理解这个问题。在该小提琴上，单击中间div，然后在动画结束后再次单击中间div。这看起来很奇怪。这就是你想要解决的问题吗？

$(document).click(function() {
    animating = false;
    if(animating == false) {
        clickedDiv.css('z-index', '1');
        clickedDiv.find(".inner_package").css('transition', 'all 2s ease-in');
        clickedDiv.find(".inner_package").css('width', '60px');
        animating = false;
    }
});

if(animating == false) {
animating = true;
//do stuff
animating = false;
}

if(animatingOne == false && animatingTwo == false && animatingThree == false) {
//logic to find out which animation is triggered
//turn the appropriate animation variable to true
//turn if off when done
}