Estoy tratando de obtener una transición gradual para un div llamado "taskIcons". Contiene una serie de íconos y me gustaría desvanecerse lentamente desde la derecha cuando entro con el mouse sobre mi div de título.

En lugar de usar el CSS incorporado: desplácese y vincúlelo al nombre de clase "título de la tarea". He usado el gancho React useState para cambiar el nombre de clase de mi elemento HTML. Aquí hay una copia de fragmentos del código:

JSX:

 const [hover, setHover] = useState(false) function handleHover() { setHover(!hover) console.log(hover) } return ( <div className='task-item' > <div className='task-header'> <h3 className='task-element task-title' onMouseEnter={handleHover} onMouseLeave={handleHover} >{title}</h3> <div className='fade-out'></div> <div name="taskIcons" className={hover ? 'task-icons ' : ' invisible-icons'}> <FaSun className='task-icon' onClick={moveTomorrow} /> {/* Placeholder for "Move to tomorrow" icon */} <FaCalendar className='task-delete task-icon' onClick={toggleCalendar}/> <FaEdit className='task-edit task-icon' onClick={editTask} /> {/* Edit Task */} <FaTimes className='task-delete task-icon' onClick={deleteTask} /> {/* Delete */} </div> </div> <div className='task-body'> <p className='task-element'>{parseBody()}</p> {buckets.map((bucket, index) => ( <span className='task-bucket task-element'key={index}>#{bucket}</span> ))} </div> <span> {dueDate} </span> {calendar ? <Schedule/> : null} </div> )

CSS:

 margin: 0px 0px 0px 10px; align-self: flex-start; text-align: left; } .task-header{ display: flex; flex-direction: row; } .task-title{ margin-right: auto; overflow-x: hidden; cursor: pointer; } .task-body { display: flex; flex-direction: column; } .invisible-icons { display: none; } .task-icons { display: flex; white-space: nowrap; margin-top: 4px; transition: 1s; } .task-icon { margin-left: 4px; margin-right: 4px; }