【问题标题】: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

    【讨论】:

      猜你喜欢
      • 2019-12-10
      • 2018-04-20
      • 2016-02-15
      • 2014-04-10
      • 1970-01-01
      • 1970-01-01
      • 2021-05-22
      • 2013-09-04
      • 1970-01-01
      相关资源
      最近更新 更多