WordPress主题中wow.js与animate.css动画不生效问题咨询

常见原因及对应修复方法 #

• 版本兼容问题（最高发）
  wow.js默认适配animate.css v3版本，如果你当前使用的是animate.css v4及以上版本，类名规则发生了变更：

  1. 动画基础类从animated变为animate__animated
  2. 所有效果类前缀改为animate__，如原fadeInUp变为animate__fadeInUp
     修复方式：修改WOW初始化配置，代码如下：

  wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animate__animated',
    offset: 100 // 可自定义元素进入视口多少像素后触发动画
  })
  wow.init();
  

  页面元素需按规则加类：

  <div class="wow animate__fadeInUp" data-wow-duration="1s">测试动画元素</div>
  

• 资源加载异常
  打开浏览器开发者工具的「控制台」和「网络」面板，排查两个问题：

  1. wow.min.js、animate.min.css是否返回404，确认路径拼写正确
  2. 是否有WOW is not defined类的报错，确认wow.js加载完成后再执行初始化代码

• 加载顺序错误
  不建议直接在模板文件硬编码资源引入，推荐通过functions.php按WordPress标准方式挂载资源，避免顺序冲突：

// 引入样式
function custom_theme_assets() {
  wp_enqueue_style( 'animate-css', get_template_directory_uri() . '/assets/styles/animate.min.css', array(), '4.1.1' );
  // 引入脚本，最后一个参数true表示挂载到body底部
  wp_enqueue_script( 'wow-js', get_template_directory_uri() . '/js/wow.min.js', array(), '1.3.0', true );
  // 内联初始化脚本，保证在wow.js加载完成后执行
  wp_add_inline_script( 'wow-js', 'new WOW({animateClass: "animate__animated"}).init();' );
}
add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );

使用上述代码后，可删除模板header、body里硬编码的animate.css、wow.js相关引入代码。

• 样式与布局冲突
  1. 检查自定义CSS是否存在animation: none !important、opacity: 1 !important这类覆盖动画属性的规则
  2. 检查动画元素的父容器是否设置了overflow: hidden，会导致wow.js无法正确检测元素是否进入视口

效果验证 #

修改完成后清空浏览器缓存和WordPress缓存（如果有安装缓存插件），滚动页面即可看到动画效果。

内容的提问来源于stack exchange，提问作者curlybom