使用anime.js搭配Tailwind CSS时动画失效，求问题排查方案

问题描述 #

尝试将 anime.js 库与 Tailwind CSS 结合使用，但动画无法运行，不确定是元素定位错误、anime.js 未正确识别，还是 Tailwind CSS 的影响。试过用 CSS 选择器（比如 Tailwind 的 bg-red-700 类名）和 DOM 对象两种方式定位元素，甚至用标签名定位，都没成功。另外用 NodeJS 管理 Tailwind CSS，但通过 CDN 引入 anime.js，怀疑这会不会有问题？

相关代码 #

root > docs > index.html #

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>

<body class="min-h-screen grid border-solid">
  <div class="border-8 border-solid border-black w-{800px} h={800px} overflow-hidden"></div>
  <div class="absolute border-8 border-solid border-black place-content-center bg-emerald-500 w-{700px} h={700px} rounded-full shadow-2xl"><img src="https://github.com/LITFAMWOKE93/LITFAMWOKE93.github.io/blob/main/resources/img/Profile_pic_resize.jpg?raw=true" alt="proflie-picture" id="profile-picture" class="border-8 border-dotted border-black rounded-full shadow-2xl " /></div>
  <div id="box" class="bg-red-700 h-32 w-32"></div>
</body>

<script>
var el = document.getElementsByClassName('bg-red-700');

anime({
  targets: el,
  translateY: [{
      value: 200,
      duration: 1200
    },
    {
      value: 0,
      duration: 800
    }
  ],
  rotate: {
    value: '1turn',
    easing: 'easeInOutSine'
  }
});
</script>

src > tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./docs/**/*.js",'./**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

问题排查与解决 #

1. 元素定位错误：类数组对象无法被 anime.js 正确解析 #

document.getElementsByClassName 返回的是 HTMLCollection（类数组对象），而 anime.js 的 targets 参数需要单个 DOM 元素、选择器字符串或标准数组，直接传入 HTMLCollection 会导致无法识别目标元素。

解决方法：

• 取类数组中的第一个元素：

  var el = document.getElementsByClassName('bg-red-700')[0];
  

• 直接传入选择器字符串让 anime.js 自行处理：

  anime({
    targets: '.bg-red-700', // 使用类选择器字符串
    translateY: [{value: 200, duration: 1200}, {value: 0, duration: 800}],
    rotate: {value: '1turn', easing: 'easeInOutSine'}
  });
  

• 用 querySelector 更简洁地获取单个元素：

  var el = document.querySelector('.bg-red-700');
  

2. 脚本执行时机不对：DOM 未加载完成就运行代码 #

如果动画脚本在 DOM 元素渲染前执行（比如放在 <head> 中），此时目标元素还未被添加到 DOM 树，自然无法找到。

解决方法：

• 将动画脚本放在 <body> 标签的末尾，确保所有 DOM 元素已加载。
• 用 DOMContentLoaded 事件包裹代码，确保 DOM 就绪后再执行：

  document.addEventListener('DOMContentLoaded', function() {
    anime({
      targets: '.bg-red-700',
      // 动画配置
    });
  });
  

3. Tailwind CSS 语法错误：宽高类写法有误 #

代码中的 w-{800px}、h-{800px} 是错误的 Tailwind 自定义值语法，正确写法应为 w-[800px]（使用方括号）。虽然这不会直接导致动画失效，但可能引发布局异常，影响动画视觉表现。

修正后代码：

<div class="border-8 border-solid border-black w-[800px] h-[800px] overflow-hidden"></div>
<div class="absolute border-8 border-solid border-black place-content-center bg-emerald-500 w-[700px] h-[700px] rounded-full shadow-2xl">...</div>

4. CDN 引入 anime.js 无兼容性问题 #

用 NodeJS 管理 Tailwind CSS 和 CDN 引入 anime.js 完全兼容，两者不存在冲突，这不是动画失效的原因。

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