如何修复框阴影过渡在悬停时不起作用？

Question

我有 box-shadow 用于 <li> 标签，但我的 transition 悬停不工作。

我的代码：

<li class="shadow-outer hover:shadow-inner transition-all duration-1000 ease-in-out cursor-pointer rounded-full w-full px-6 py-2 flex flex-row justify-between">
     <span>home</span>
     <span>i</span>
</li>

顺风配置：

module.exports = {
    ...
    theme: {
        boxShadow: {
            inner: 'inset 3px 3px 3px #cdcdcd, inset -3px -3px 3px #fafafa',
            outer: '3px 3px 3px #cdcdcd, -3px -3px 3px #fafafa',
        },
    },
    variants: {
        extend: {
            boxShadow: ['hover'],
            transitionProperty: ['hover'],
            transitionDuration: ['hover'],
            transitionTimingFunction: ['hover'],
        },
    },
    ...
}

Answer 1

问题不在于顺风，而在于 css。

Box Shadow inset 无法过渡到 non-inset。一般来说，动画和过渡只适用于数值。所以要获得过渡效果，您需要像这样设置 0px 值：

boxShadow: {
    inner:
      'inset 3px 3px 3px #cdcdcd, inset -3px -3px 3px #fafafa, 0px 0px 0px #cdcdcd, 0px 0px 0px #fafafa',
    outer:
      'inset 0px 0px 0px #cdcdcd, inset 0px 0px 0px #fafafa, 3px 3px 3px #cdcdcd, -3px -3px 3px #fafafa',
  },

See working example here

如何修复框阴影过渡在悬停时不起作用？

How to fix box-shadow transition is not working on hover?

css

frontend

hover

tailwind-css