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

【问题标题】：How to fix box-shadow transition is not working on hover?如何修复框阴影过渡不适用于悬停？
【发布时间】：2021-11-05 20:38:52
【问题描述】：

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

【问题讨论】：

标签： css frontend hover tailwind-css

【解决方案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

【讨论】：