在使用smoothstate.js时，提交表单会导致触发平滑状态

Question

我有网站使用smoothstate.js的每一页。在几个页面上，我有一个带有表单的模式框弹出。这些表单工作得很好。

在另一个页面上，我在html中包含了一个基本表单。当我点击表单上的submit按钮时，表单实际上是提交的，但是平滑状态会启动，它会淡出内容并启动加载屏幕。

我希望这种情况不会发生。下面是我的平滑状态函数：

$(function(){
    'use strict';
    var $page = $('#main'),
    options = {
        debug: true,
        prefetch: true,
        cacheLength: 2,
        allowFormCaching: false,
        forms: 'form',
        blacklist: 'input[type="submit"], .animsition-loading, .hs-button',
        onStart: {
            duration: 1050, // Duration of our animation
            render: function ($container) {
                $('.animsition-loading').show();
                $container.addClass( 'slide-out' );
                smoothState.restartCSSAnimations();
            }
        },
        onReady: {
            duration: 0,
            render: function ($container, $newContent) {
                $container.html($newContent);
                sitejs();
                $(document).ready();
                $(window).trigger('load');
            }
        },
        onAfter: function( $container ) {
            $('.animsition-loading').hide();
            $container.removeClass( 'slide-out' );
        }
      },
      smoothState = $page.smoothState(options).data('smoothState');
});

Answer 1

我用时事通讯表单也遇到了同样的问题。以下是您的问题的解决方案。您必须将JS中已列入黑名单的类(例如"no-smoothsate")添加到FORM标记中。它工作得很完美。

<form class="no-smoothState">
...
</form>

我找到了解决方案here

Answer 2

我相信，默认情况下，平滑状态被设计为在表单和链接上工作，所以，由于cf7已经可以与AJAX一起工作，你只需要像前面提到的那样将其列入黑名单。

cf7的代码是：

;(function($) {
'use strict';

    var $body = $('html, body'),
    content = $('#main').smoothState({  
        blacklist: '.wpcf7-form',
        // Runs when a link has been activated
        onStart: {
            duration: 500, // Duration of our animation
            render: function ($container) {
                // Add your CSS animation reversing class
                $container.addClass('is-exiting');

                // Restart your animation
                smoothState.restartCSSAnimations();
            }
        },
        onReady: {
            duration: 0,
            render: function ($container, $newContent) {
                // Scroll user to the top, this is very important, transition may not work without this
                $body.scrollTop(0);

                // Remove your CSS animation reversing class
                $container.removeClass('is-exiting');

                // Inject the new content
                $container.html($newContent);

                // Trigger load functions
                $(document).ready();
                $(window).trigger('load');
            }
        },
        onAfter: function($container) {
            initContactForm();
        }
    }).data('smoothState');
})(jQuery);