英文:

How to transition background-position in tailwind (without using transition-all)

问题

我正在尝试使bg-left在悬停时过渡到bg-right，并带有过渡效果。我知道我可以使用transition-all，但我遇到了一些问题。我尝试更新Tailwind配置文件，使用transitionProperty: { position: background-position }，但没有起作用。有人有关于这个的任何想法吗？谢谢！

英文:

I’m trying to make the bg-left transition to bg-right on hover with transition. I know I can use transition-all, but I’ve had some issues with it. I tried updating the Tailwind config file with transitionProperty: { position: background-position }, but it didn’t work. Does anyone have any ideas for this? Thank you!

答案1

得分: 3

`transitionProperty` 的值需要是 `transition-property` 的有效值。在以下代码中：

```js
property: background-position,

您试图执行变量 background 和 position 的减法运算，这将计算出一个数字，这不会是 transitionProperty 的相关值，因为截至我写这篇文章时，没有 CSS 属性仅由数字键组成。更有可能的是，background 和/或 position 在范围内未定义，该语句将导致 JavaScript 错误。

相反，考虑将属性标识符作为 property 键的值传递为字符串：

tailwind.config = {
  theme: {
    extend: {
      transitionProperty: {
        position: 'background-position',
      },
    },
  },
};

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-left bg-[url(https://picsum.photos/300/80)] w-20 h-20 transition-position hover:bg-right"></div>

<details>
<summary>英文:</summary>

The values for `transitionProperty` need to be valid values for `transition-property`. With:

```js
property: background-position,

You are trying to do a mathematical operation of subtraction of the variable background and position, which would evaluate to a number and this would not be a relevant value for transitionProperty since as of writing, there are no CSS properties that consist of solely as a numerical key. More likely, background and/or position are not defined in the scope and the statement would cause a JavaScript error.

Instead, consider passing the property identifier as a string for the value of the property key:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

tailwind.config = {
  theme: {
    extend: {
      transitionProperty: {
        position: 'background-position',
      },
    },
  },
};

<!-- language: lang-html -->

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-left bg-[url(https://picsum.photos/300/80)] w-20 h-20 transition-position hover:bg-right"></div>

<!-- end snippet -->