代码之家 › 专栏 › 技术社区 › doobean

如何在顺风中转换背景位置(不使用全部转换)

tailwind-ui tailwind-css css

0

doobean · 技术社区 · 1 年前

我正在努力 bg-left 过渡到 bg-right 悬停时带有过渡。我知道我可以用 transition-all ,但我遇到了一些问题。我尝试用更新Tailwind配置文件 transitionProperty: { position: background-position } ,但没用。有人对此有什么想法吗?非常感谢。

1 回复 | 直到 1 年前

1

3

Wongjn 1 年前

的值 transitionProperty 需要是的有效值 transition-property 。带有:

property: background-position,

你正试图做一个减去变量的数学运算 background 和 position ,它将评估为一个数字,而这不是 transition属性 因为在撰写本文时,没有任何CSS属性仅由数字键组成。更有可能的是, 出身背景 和/或 位置 未在作用域中定义,并且该语句将导致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>