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

您的schemas: [CUSTOM_ELEMENTS_SCHEMA]似乎无法正常工作 - 该课程似乎正在重新连接。

从使用.removeClass和.addClass切换到 - ＆gt; .toggleClass。

对于像你这样的场景更好。更容易在类之间切换，因此名称

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

1 个答案: