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

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

[x] Tested locally
[ ] Added new dependencies
[ ] Updated the docs
[x] Added a test

midudev / tailwind-animations

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