WOW.js在Wordpress上不能正常工作

WOW.js not working properly with Wordpress

本文关键字：常工作 工作 不能 js Wordpress WOW      更新时间：2023-09-26

所以我想让wow.js(和animation .css)在我的Wordpress模板上工作。我已经把它们都链接好了(它没有抛出错误)，动画确实工作，但由于某种原因，动画是在页面加载时触发的，而不是在页面滚动时触发的。影响是所有的动画在页面加载时开始。我相信wow.js在某个地方有问题，但我似乎找不到。

这是我的代码。提前谢谢。 显然也

: 

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中)启动wow，但这也不起作用:

//* 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 }

在Page模板中(以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();
相关文章：