Add display: none; property to the animation keyframes for fade-out animations.

[LuisJimenez19]

What does this PR do?

This PR adds the display: none; property to the animation keyframes for fade-out animations. This change ensures that elements using fade-out animations are properly hidden after the animation completes.

Why are we doing this?

Previously, the fade-out animations didn't explicitly set the display property, which could lead to elements remaining visible in the DOM after the animation completed. By adding display: none; to the animation keyframes, we ensure that elements are properly hidden once the animation finishes.

---

Test Case(s):

Added a test to verify the behavior of fade-out animation.

it('use fade out animation', async () => {
  const css = await generatePluginCSS({
    content: '<div class="animate-fade-out">Hello</div>'
  })
  expect(css).toMatch('@keyframes fade-out{0%{opacity:1}100%{opacity:0;display:none}}.animate-fade-out{animation:fade-out 0.6s ease-out both}')
})

Test Result(s):

✓ tailwindcss-animations plugins (18) 1622ms
✓ use a predefined animation
✓ use fade in up animation
✓ use a predefined animation delay
✓ use a custom animation delay
✓ use a predefined animation duration
✓ use a predefined named animation duration
✓ use a custom animation duration
✓ use a timing function animation
✓ use a bezier curve as a timing function animation
✓ use a custom bezier curve as a timing function animation
✓ use a custom animation iteration count
✓ use a custom animation iteration count with an arbitrary value
✓ use a custom animation direction
✓ use a fill mode animation
✓ use not custom animation steps
✓ use a custom animation steps
✓ use a play state animation play
✓ use fade out animation

---

Checklist

• Tested locally
• Added new dependencies
• Updated the docs
• Added a test

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tailwind-animations	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 13, 2024 3:19pm