Tips for incorporating a transition effect on group hover using Tailwind CSS

I've been working on creating a cool animated transition effect for my button where a chevron icon appears when the user hovers over it. I'm currently developing the website using NextJS and TailwindCSS, and I've implemented a group hover feature to make the chevron visible when the button is hovered over. Everything seems to be functioning correctly, except for the fact that the transition effect isn't happening as smoothly as I'd like. The chevron just pops up instantly instead of gradually appearing.

Below you can find the code snippet I'm currently using. Any assistance with this issue would be greatly appreciated.

<a
    href={url}
    className="ease-out duration-300 transition-all group inline-block rounded-xl bg-accent2 px-4 py-2 text-white font-bold hover:bg-accent1 hover:text-black"  
>
    <span className="flex items-center gap-2">
        <span>{text}</span>
        <IconChevronRight className="ease-out duration-300 transition-all hidden group-hover:block"/>
    </span>
</a>
cssreactjsnext.jstailwind-css

Answer №1

hidden hides the element with display: none. Unfortunately, you cannot have a transition occur simultaneously with the removal/addition of display: none. Instead, you can use opacity to create a fading effect:

function IconChevronRight({ className }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="red"
      className={`w-6 h-6 ${className}`}
    >
      <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
    </svg>
  );
}

function App({ url, text }) {
  return (
    <a
      href={url}
      className="ease-out duration-300 transition-all group inline-block rounded-xl bg-accent2 px-4 py-2 text-white font-bold hover:bg-accent1 hover:text-black"  
    >
      <span className="flex items-center gap-2">
        <span>{text}</span>
        <IconChevronRight className="ease-out duration-300 transition-all opacity-0 group-hover:opacity-100"/>
      </span>
    </a>
  )
}

ReactDOM.createRoot(document.getElementById('app')).render(<App url="" text="Foo"/>);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div id="app" class="bg-slate-500"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain the significance of the ">" symbol within CSS coding?

Seeking some quick points for those in the know. Can someone provide a thorough explanation of the meaning and proper usage of the > symbol? Appreciate it. ...

htmlcsscss-selectors

Incorporating Sass into an HTML document

Recently, I discovered Sass and went through its documentation. I successfully installed the package on my Ubuntu system alongside Ruby and Haml. Now I'm eager to learn how to use it with Wordpress or a basic HTML file. Being new to this, I'm see ...

htmlcsssass

What could be the reason behind the significant void in the grid I designed?

I'm currently learning how to utilize the grid container and have successfully created a grid with 2 images on top, 2 on the bottom, and one that stretches vertically on the left side. While I have arranged the grid as desired, I am facing an issue wi ...

htmlcsscss-grid

How to evenly size overlay divs with CSS

I currently have two divs positioned on top of each other with the following CSS: div.container { position: relative; min-height: 100%; margin:0; padding:0; background:url('http://www.scratchprogramming.org/img/book.png'); ...

htmlcss

What can I do to protect my REST API from unauthorized access?

Recently, I created a straightforward REST API using ExpressJs with React as my client-side application. However, I realized that anyone can access my API endpoints due to the nature of having the React app on the client side. This means others could pot ...

node.jsreactjsapiexpresssecurity

What is the best way to revert my useState back to its original state once the filtered list has been displayed?

I am struggling to reset my projectList to its initial state so that the filterProjects function can search through the entire projectList instead of the already filtered ones. I have a resetProjects function, but I'm unsure where to call it in order ...

javascriptreactjsarraysreact-hooks

Words are cut off in a random manner on the entry content list for phone users

I struggle with CSS and have a basic understanding to make adjustments to my website. The issue I am encountering involves the .entry-content ul li elements. On desktop, they display correctly without random word breaks, but on mobile, words are being cut ...

css

Is there a way to make a string evaluate inline using JavaScript and React?

In my function, the following code works perfectly: console.log(theme.colors.blues[1]); To make the last part dynamic, I tried the following approach: const getColor = (theme, passedColorProp) => { console.log(theme.colors.[passedColorProp]); }; g ...

javascriptreactjs

Encountering difficulties linking to a stylesheet or a script in an HTML file delivered by Express server

Currently, I'm facing the challenge of breaking down my Express app code into multiple files. Unfortunately, I am unable to utilize <link href> or <script src> for linking stylesheets or scripts. Below is the relevant snippet from my inde ...

javascripthtmlcssnode.jsexpress

Having trouble with the getStatic Path function not functioning properly for the root URL "/" in Next.js?

Exploring the capabilities of Prismic and NextJS for the very first time. I'm currently facing an issue where the base URL localhost:3000/ is not loading as expected, while /About and /Pricing are functioning correctly. import { GetStaticPaths, GetSt ...

next.jsprismic.io

Creating Multiple Choice Forms in React: A Guide to Implementing Conversational Form

I've been exploring React (Next.js) and I came across an interesting example of how to use multiple choice in simple HTML on Codepen ([https://codepen.io/space10/pen/JMXzGX][1]). Now I'm curious about how to implement a similar functionality in R ...

javascriptreactjsnext.jschatbot

Ways to retrieve interface definition using a variable

I have an interface that organizes various states together export interface ScanFiltersStatePage1 { keywords: SensitiveInfoFileKeywordFilter categories: string[] classifications: string[] fileTypes: string[] infotypes: string[] regulations: str ...

javascriptreactjstypescript

Why isn't my React cascading select filter working properly on onChange event?

I'm new to React and facing an issue in my app. I have a set of options fields in my drawer on the left side, where each subsequent option depends on the selection of the previous one. The problem arises when my filter function returns an empty array ...

reactjsaxiosmaterial-ui

Deleting a style attribute from a CSS element

Is there a way to remove a property from one element when another element is hovered over by the user? <button id="element1" type="button">Element1</button> <button id="element2" type="button">Ele ...

htmlcss

What is the method of generating an HTML tag solely using CSS?

Looking to style HTML tags without altering them in any way? Consider this example: <div id="Code_G" class="editor-group"> editor-group<br /> <div id="Code_L" class="editor-label "> editor-label </div> < ...

htmlcss

Having trouble with loading images from the assets folder, keep encountering a 304 error

While attempting to load a PNG file from the assets folder, I encountered a 304 error. My goal is to load images from the assets folder. const path = require('path'); const express = require('express'); const webpack = require('we ...

javascriptnode.jsexpressreactjswebpack

Cannot send response headers once they have already been sent to the client [NEXTJS]

Currently, I am engrossed in a personal project focused on creating a dashboard using NextJS. This project serves as an opportunity for me to delve into learning NextJS and the fundamental concepts of TypeScript. My primary challenge at the moment revolves ...

node.jstypescriptnext.js

What is the best way to bridge the gap between the rows?

After combining the top and bottom blocks, I now have a gap in my layout. Is there a way to move this row up without causing any issues? I need assistance with resolving this problem using Bootstrap. <link rel="stylesheet" href="https://maxcdn.boots ...

csstwitter-bootstrap-3

Avoid running the second then() function in a promise if a specific condition is satisfied

Can anyone help me figure out how to prevent the code block below from executing any further once arkIsEnabled is evaluated as true? return promise .then(response => { if (arkIsEnabled) { dispatch(createArk(respo ...

javascriptreactjspromise

What is the process of setting up a RichTextEditor using Facebook's Lexical and inputting a text string for initialization?

I am looking for a way to integrate Facebook's lexical plugin into my React app by replacing the existing Material UI textFields. I need a simple example of how to populate the rich text plugin with text content. Currently, I am using this example: ...

reactjslexicaljs