WordPress 上的 Wow.js 在页面加载时加载一些动画，而其他则根本没有答案

【问题标题】：Wow.js on WordPress loading some animations on page load and others not at allWordPress 上的 Wow.js 在页面加载时加载一些动画，而其他则根本没有
【发布时间】：2023-03-05 12:57:01
【问题描述】：

我正在尝试在 my WordPress site 上使用 wow.js，并且我已经浏览了一些关于类似问题的论坛，但我似乎无法让它发挥作用。我相信顶部的图标站点正在加载页面加载而不是滚动并在页面上进一步向下（在绿色带下）我有一个在向下滚动到它时根本不会加载的 h2。（添加了动画类，但元素被隐藏并且没有动画发生）。

我的html：

<h1 class="wow animated fadeInRight left">A website must perform many   
functions.</h1>

在functions.php中

function sk_enqueue_scripts() {
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/js/animate.css' );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.js', array(), '', true );

}

add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );


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


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

提前致谢！

【问题讨论】：

标签： wordpress animate.css wow.js

【解决方案1】：

你有一个错误：

未捕获的引用错误：未定义 WOW

...因为您将 wow.js 排在页脚中，并尝试在头部使用 WOW。

【讨论】：

糟糕，我最初在页脚中手动加载它并没有工作，所以我将其更改为入队。我修复了错误和同样的事情......仍然无法正常工作。任何其他想法为什么会发生这种情况？
你应该把你的动作钩子从wp_head改为wp_footer
这实际上是我所做的，它并没有改变任何东西。我还注意到初始化加载了两次，所以我从函数中删除了 sk_wow_init_in_footer() 和 wow_init() 并在 wp_footer() 之后手动将其放入 footer.php；没有错误..仍然无法正常工作。

【解决方案2】：

搜索了一段时间.. 尝试不同的建议。终于按照本教程让它工作了。

http://www.jeremycookson.com/how-to-add-scrolling-animations-in-wordpress/

这是我在函数文件中替换的代码。

//* Enqueue Scripts
function sk_enqueue_scripts() {
wp_enqueue_script( 'myscripts', get_stylesheet_directory_uri() . '/js/scripts.js', array(), '', true );
wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.js', array(), '', true );
wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/js/animate.css');
}
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );

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


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

我不确定除了将我的 scripts.js 文件也移动到队列中之外发生了什么变化，而之前我在 footer.php 中手动加载它

*****UPDATE 我还注意到删除

html,body{height:100%;}

可能在 WOW 确定动画何时出现时有所不同。**

【讨论】：