WOW.js 无法与 Wordpress 一起正常工作

Question

所以我试图让 wow.js（和 Animate.css）在我的 Wordpress 模板上工作。我已经将它们全部连接好（它不会引发错误）并且动画确实可以工作，但由于某种原因，动画是在页面加载时触发的，而不是在页面滚动时触发的。影响是所有动画都在页面加载时开始。我相信某处 wow.js 有问题，但我似乎无法找出原因。

这是我的代码。提前致谢。

在functions.php中：

function theme_styles(){
    //Add any css style sheets here
    wp_enqueue_style('animate', get_template_directory_uri() .'/css/animate.min.css');
}
function theme_js(){
    wp_enqueue_script('wow', get_template_directory_uri() .'/js/wow.min.js',array(),'',true);
}

//Adds all style sheets above to wp
add_action('wp_enqueue_scripts', 'theme_styles');
//Adds all javascript above to wp
add_action('wp_enqueue_scripts', 'theme_js');

在footer.php中：

<?php wp_footer(); ?>

<script type="text/javascript">     
var wow = new WOW(
  {
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       false        // trigger animations on mobile devices (true is default)
  }
);
wow.init();
</script>

我也尝试过使用另一种方法（在functions.php中）启动哇，但这也不起作用：

//* Enqueue script to activate WOW.js
add_action('wp_enqueue_scripts', 'sk_wow_init_in_footer');
function sk_wow_init_in_footer() {
        add_action( 'print_footer_scripts', 'wow_init' );
}

//* Add JavaScript before </body>
function wow_init() { ?>
    <script type="text/javascript">
        new WOW().init();
    </script>
<?php }

在页面模板中（以front-page.php为例）：

<div class="container-fluid">
    <header class="row">
        <h1 class="wow fadeInDown">Delivering high quality professional websites for small to medium sized businesses in and around Bournemouth</h1>
    </header>
</div>

Answer 1

将wow.init() 排队并添加wow.js 作为依赖项对我有用：

add_action( 'wp_enqueue_scripts', 'b5f_wow_init' );

function b5f_wow_init() {
    wp_register_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js' );
    wp_enqueue_script( 'my-wow', get_stylesheet_directory_uri() . '/js/my-wow.js', array( 'wow' ), null, true );
    wp_enqueue_style( 'wow-css', get_stylesheet_directory_uri() . '/css/animate.min.css' );
}

并将my-wow.js 作为默认值：

var wow = new WOW(
  {
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       false        // trigger animations on mobile devices (true is default)
  }
);
wow.init();