javascript - WOW.js无法与Wordpress一起正常使用

所以我试图让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>

最佳答案

使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();

关于javascript - WOW.js无法与Wordpress一起正常使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24528490/