主页 / coding / 问题 / 79426597
Accepted
havaka
Asked: 2025-02-10 17:25:45 +0800 CST

如何仅延迟 tailwind css 中元素的某些动画？

  • 772

我是 CSS 业余爱好者，对 TailwindCSS 还不熟悉，所以我不知道从哪里开始解决这个问题。

我有一个<p>元素，现在它在悬停时会300ms延迟显示，但我希望它完全无延迟地消失。我该如何实现？

<p className={`opacity-0 group-hover:opacity-100 delay-300`}>
  Lorem ipsum
</p>

‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎

tailwind-css

1 个回答

  1. Best Answer

    为确保元素消失时没有延迟，请默认将 设置delay为0。若要仅在元素出现时有延迟，请使用group-hover:变体指定延迟，例如delay-300。

    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>

<div class="group">
  Try Here (mouse on: 800ms delay; mouse out: 0ms delay)
  
  <p class="
    opacity-0 transition-opacity duration-300 delay-0
    group-hover:opacity-100 group-hover:delay-800
  ">
    Lorem ipsum
  </p>
</div>

    由于只要悬停事件处于活动状态，group-hover:变体就会应用delay-800，因此在出现期间它将有效。但是，一旦您将鼠标移开并且悬停事件结束， 就会group-hover:delay-800立即停止，而对于消失，delay-0将应用 。

    • 1

相关问题