Attempting to style an active button with a small transition when it receives that attribute has been a challenge. The same issue occurs with the paragraph rendered from the data file.
function Pagination() {
const [selected, setSelected] = useState(0);
function TabButton({ children, handleClick, index }) {
return (
<li><button active={selected === index ? "true" : "false"} onClick={handleClick}>{children}</button></li>
);
}
function handleClick(index) {
setSelected(index);
}
return (
<div className="pagination-container">
<div className="pagination-right">
<h3>Discover New Horizon</h3>
<div className="headers">
<ul>
<TabButton index={0} handleClick={() => handleClick(0)}>about us</TabButton>
<TabButton index={1} handleClick={() => handleClick(1)}>why choose us</TabButton>
<TabButton index={2} handleClick={() => handleClick(2)}>our mission</TabButton>
</ul>
</div>
<div className='paragraph'>
<p>
{pagins[selected].content}
</p>
</div>
</div>
</div>
</div>
);
}
.headers button {
border: 0;
color: #9b9b9b;
border-bottom: 3px solid #9b9b9b;
background-color: transparent;
transition: all 0.3s ease-in-out;
}
.headers button[active="true"] {
color: var(--primary-color);
border-color: var(--primary-color);
}
.headers button:hover {
color: var(--primary-color);
}
.paragraph {
transition: opacity 0.3s;
}
Changing the active state based on the match between index and selected triggers a color change with a border for the button, however, this occurs instantaneously without the intended transition. Hover transitions work as expected but not in this specific scenario.