通过变量传递动画延迟值时，Tailwind 动画不起作用

Question

我正在使用顺风动画，我需要在顺风中创建自定义动画。问题是，当我尝试使用变量或数组传递动画延迟的值时，动画似乎不起作用。当我明确给出动画延迟值时，它似乎工作得很好。

如果您认为变量值没有正确传递，我向您保证它正确传递，我什至在 chrome 开发工具中检查了正在应用的动画类。

最奇怪的事情是，当我从变量传递延迟值 0.1、0.2 或 0.3 时，它工作得很好。但如果我尝试使用任何其他值（比如 0.4、0.24 等），它将不起作用。

这是一个非常奇怪和奇怪的问题，我已经花了一天多的时间来解决它，但仍然没有任何结果。

请记住，这不是主要问题，问题非常广泛，我尝试用一个非常简单的示例来总结问题，因此请克制自己不要给出其他可能的解决方案。我确实有其他解决方案，但我需要这个来使我的动画动态化。

这是无法工作的代码，因为我传递的延迟值是 0.4

function AnimationBox() {
  const delay = 0.4;
  return (
    <div
      className={`flex h-80 w-full animate-[slideIn_0.5s_${delay}s_both] bg-white`}
    ></div>
  );
}

export default AnimationBox;

这是当我传递延迟值 0.2 时将起作用的代码（因为像 0.1、0.2 和 0.3 这样的值工作得很好）

function AnimationBox() {
  const delay = 0.2;
  return (
    <div
      className={`flex h-80 w-full animate-[slideIn_0.5s_${delay}s_both] bg-white`}
    ></div>
  );
}

export default AnimationBox;

这里的代码也可以工作，因为我明确给出了延迟值，无论值是多少，它都可以正常工作。

function AnimationBox() {

  return (
    <div
      className={`flex h-80 w-full animate-[slideIn_0.5s_0.123s_both] bg-white`}
    ></div>
  );
}

export default AnimationBox;

我只需要一个它不起作用的原因，并了解什么是事物行为。

Answer 1

根据文档：

Tailwind 如何提取类名的最重要含义是，它只会查找源文件中以完整不间断的字符串形式存在的类。

如果您使用字符串插值或将部分类名连接在一起，Tailwind 将找不到它们，因此不会生成相应的 CSS：

不要动态构造类名

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

在上面的示例中，字符串

text-red-600

和

text-green-600

不存在，因此 Tailwind 不会生成这些类。 相反，请确保您使用的任何类名完整存在：

始终使用完整的类名

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

某些值有效（例如

0.1

、

0.2

），因为您有一些完整的类名称，其他地方像

animate-[slideIn_0.5s_0.1s_both]

那样 不 使用字符串插值并按原样编写。字符串插值的使用然后“搭载”它，因此它适用于这些值纯属巧合。

要使其发挥作用，您可以：

• 使用

  style

  属性：

  <div
    className="… animate-[slideIn_0.5s_both] …"
    style={{ animationDelay: `${delay}s` }}
  >
  

• safelist

  类，如果您的已知值数量有限：

  module.exports = {
    safelist: [
      'animate-[slideIn_0.5s_0.1s_both]',
      'animate-[slideIn_0.5s_0.2s_both]',
      'animate-[slideIn_0.5s_0.3s_both]',
      'animate-[slideIn_0.5s_0.4s_both]',
    ],
    // …
  ];