I've been experimenting with incorporating animation into material-UI, specifically making the underline move from left to right for a tab. Here's the code I've come up with:
const useStyles = makeStyles({
link: {
padding: "1rem",
color: "black",
fontSize: "18px",
fontWeight: "400",
lineHeight: "24px",
position: "relative",
"&:before": {
content: "''",
position: "absolute",
width: "0",
height: "2px",
bottom: "0",
left: "0",
backgroundColor: "#FFF",
visibility: "hidden",
transition: "all 0.3s ease-in-out",
},
"&:before:hover": {
visibility: "visible",
width: "100%"
}
}
}
function Tab(props) {
const classes = useStyles();
const {href} = props;
const preventDefault = (event) => event.preventDefault();
return (
<Link href={href} onClick={preventDefault} className={classes.link}>
<Typography variant="h6">{props.children}</Typography>
</Link>
);
}
Upon testing this code, the tab is behaving differently than expected and not displaying the intended animation.
To guide my implementation, I'm referring to this source.