第一个动画完成后动画重复，如何取消？

Question

我正在尝试创建一个设计，您可以在其中单击一个框，它会滑入另一个包含更多内容的视图，当您单击箭头时，它会 return。

问题是这样的：

        $(boxes).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
            boxes.parent().css({ 
                'height' : '0', 
                'opacity' : '0',
                'overflow' : 'hidden'
            });

            fboxContentCover.css({
             'height' : 'auto',
             'opacity' : '1',
            });

            fboxContentCover.removeClass('fadeOutLeft').addClass('animated bounceInRight');
        });

        $(fboxContentCover).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {

            fboxContentCover.css({ 
                'height' : '0', 
                'opacity' : '0',
                'overflow' : 'hidden'
            });

            $('.fbox').parent().css({
             'height' : 'auto',
             'opacity' : '1',
            });

            $('.fbox').removeClass('fadeOutLeft').addClass('animated fadeInRight');
        });

当第一个完成后，成功进入第二个视图，但是当你点击返回时，它会再次滑入第一个视图，但它会再次闪现第二个视图然后去再次回到第一个视图。

我怎样才能阻止这种情况发生？

代码和所有内容都在这里：https://codepen.io/anon/pen/JNodjO

Answer 1

您的 .removeClass 似乎没有正常工作 - class 似乎正在重新连接。

从使用 .addClass 和 .removeClass 切换到 -> .toggleClass。

更适合你这种场景。更容易在 class 之间切换，因此得名

第一个动画完成后动画重复，如何取消？

Animation repeats after the first animate is finished, how to cancel it?

css

jquery

animate.css