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

Posted 2023-03-07

【中文标题】如何修复框阴影过渡不适用于悬停？

【英文标题】：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'],
        ,
    ,
    ...

【参考方案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