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

Question

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

问题是这样的：

        $(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 似乎无法正常工作 - 课程似乎正在重新附加。

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

更适合像你这样的场景。更容易在类之间切换，因此得名