css - 如何修复框阴影过渡不适用于悬停？

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'],
        },
    },
    ...
}

标签： cssfrontendhovertailwind-css

Answer 1

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

盒子阴影插图不能过渡到非插图。一般来说，动画和过渡只适用于数值。因此，要获得过渡，您需要像这样设置 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',
  },

请参阅此处的工作示例