在本地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。

你可能会发现，顺风->Group-hover:可见类表示:

.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类添加你自己的动画关键帧。

Answer 2

感谢Ali javanmardi的提示，我成功地实现了我想要的。主要研究结果如下:

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

相反，我创建了一个自定义动画15，其中第一个"过渡";关键帧发生在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: [],
}

Answer 3

这是我不使用自定义动画的实现。你只需要在父节点悬停时添加一个延迟，当父节点不悬停时将延迟重置为零。

<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer components {
#container {
@apply flex flex-col items-center gap-2 mt-4;
};
#button {
@apply bg-blue-400 text-white p-1 rounded;
};
#tooltips {
@apply bg-green-400 p-0.5 w-24 left-1/2 -translate-x-1/2 
translate-y-10 transition-opacity rounded;
};
};
</style>
<!-- Ignore previous code block, it's just for styling -->
<div id='container'>
<h1>Hover with delay tailwindcss<h1>
<button id='button' class='relative group'
>Hover me
<span id='tooltips' class='absolute 
opacity-0 
delay-0 
group-hover:opacity-100 
group-hover:delay-300'
>I'm here 👋</span>
</button>
</div>