在原生 tailwindcss 中为 hover:display 属性添加延迟

Question

我有一个悬停时变大的边栏。在该侧边栏中，我有包含额外内容的 div，这些内容仅在侧边栏悬停时显示。下面的代码运行良好：

HTML 文件

    <!--Sidebar-->
    <div class="group w-16 bg-blue-700 hover:w-44">Sidebar
        <div>Item 1
            <span class="hidden group-hover:inline">Item 1: Details</span>
        </div>
        <div>Item 2
            <span class="hidden group-hover:inline">Item 2: Details</span>
        </div>
    </div>

CSS 文件

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {},
    extend: {},
    variants: {
        extend: {
            width: ['hover'],
            display: ['group-hover'],
        },
    },
    plugins: [],
}

但是，我想在侧边栏悬停时创建一个漂亮的过渡，以便它平滑地变大。我通过将 HTML 文件更改为 -->

来做到这一点

新建HTML文件

    <!--Sidebar-->
    <div class="group w-16 bg-blue-700 hover:w-44 transition-all">Sidebar
        <div>Item 1
            <span class="hidden group-hover:inline">Item 1: Details</span>
        </div>
        <div>Item 2
            <span class="hidden group-hover:inline">Item 2: Details</span>
        </div>
    </div>

这样做，现在，当侧边栏悬停时有一个小错误：在侧边栏达到其全尺寸之前显示额外的内容。我需要为额外内容的显示添加延迟。理想情况下，侧边栏首先会平滑地变大并达到其全尺寸，然后才会出现额外的内容。有没有办法在原生顺风中这样做 css?

Answer 1

为了达到这个目的，我做了一个简单的 hack。

您可能会发现自己，tailwindcss->group-hover:visible class 代表：

.group:hover .group-hover\:visible {
    visibility: visible;
}

所以我将 group-hover:visible 更改为 xgroup-hover:visible 并添加了一些动画而不是原来的 tailwindcss:

@keyframes tooltip-show {
  0%   {opacity: 0;}
  5%   {visibility: visible;}
  25%  {opacity: 50;}
  50%  {opacity: 75;}
  100% {opacity: 100;}
}
.group:hover .xgroup-hover\:visible {
  animation-delay: 0.7s;
  animation-name: tooltip-show;
  animation-duration: 2s;
}

这个简单的 hack 对我有用:)

因此您可以按照相同的方式为您想要的 group-hover:inline class 添加您自己喜欢的动画关键帧。

Answer 2

感谢，我实现了我想要的。主要发现是：

侧边栏中的项目详情需要使用绝对定位
在这种特定情况下，在过渡上添加延迟（例如 group-hover:visible delay-150）不起作用，因为这会导致详细信息在侧边栏关闭后消失（因为在开始和结束时应用了延迟）

相反，我创建了一个 1s 的自定义动画，其中第一个“过渡”关键帧发生在 15%，因此有效地创建了从 0% 到 15% 的延迟，结合 animation-fill-mode: forwards; 下面是我的代码.

HTML 文件

    <!--Sidebar-->
    <div class="group w-16 bg-blue-700 hover:w-44 transition-all">Sidebar
        <div class="relative">Item 1
            <span class="absolute opacity-0 invisible group-hover:animate-tooltip_show ml-2">Item 1: Details</span>
        </div>
        <div class="relative">Item 2
            <span class="absolute opacity-0 invisible group-hover:animate-tooltip_show ml-2">Item 2: Details</span>
        </div>
    </div>

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      keyframes: {
        tooltip_show: {
          '0%' : { visibility: 'hidden', opacity: '0'},
          '15%' : { visibility: 'hidden', opacity: '0'},
          '100%' : { visibility: 'visible', opacity: '100'},
        }
      },
      animation: {
        tooltip_show: 'tooltip_show 1s ease forwards',
      }
    },
  },
  variants: {
    extend: {
      width: ['hover'],
      animation: ['group-hover'],
    },
  },
  plugins: [],
}

在原生 tailwindcss 中为 hover:display 属性添加延迟

Add delay to a hover:display property in native tailwindcss

tailwind-css

在原生 tailwindcss 中为 hover:display 属性 添加延迟

Add delay to a hover:display property in native tailwindcss

tailwind-css

在原生 tailwindcss 中为 hover:display 属性添加延迟