React - 使用 animation 注入内联样式

Question

I have a component that needs to have different animations for each one of its children.

I am using React Hooks and Material UI to style my components.

My component(s) looks as follows:

const useStyles = makeStyles({ // from material ui
  root: {
    position: 'relative',
  },
  child: {
    position: 'absolute',
  },
})

const Children = (props) => {
  const { count } = props;
  const classes = useStyles();
  const elements = [];

  // Generating random values for each child.
  for (let i = 0; i < count; i += 1){
    const randomX = Math.random() * 100;
    const randomY = Math.random() * 100;
    ... other random variables
    const delay = Math.random(); // I want to use this in my animation
    const duration = Math.random() * (3 - 0.5) + 0.5; // I want to use this in my animation
    elements.push({ ... all random variables mapped });
  }

  return (
    <>
      {elements.map(item => {
        <div
          key={item.x}
          style={{
            top: `${item.x}`,
            left: `${item.y}`,
            color: `${item.color}`,
            ... and so forth
          }}
          className={classes.child}
        />
      }
    </>
  );
};

const Parent = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Children count={5} />
    </div>
  );
};

My issue is that I want different animations to trigger for the children elements. I have tried adding a keyframe animation section for the makeStyles styling, and if I just define it up there I can easily add the styling and keyframe animation, and it works, However I have issues with adding different parameters for each child element if I do it there. as far as I know.

const useStyles = makeStyles({
  root: { ... }, 
  child: {
    ...
    animation: '$fade 2s 1s infinite', // This works but I can't add different values for each child 
                                     // I want to change duration and delay for each child
  },
  '@keyframes fade': {
    '0%': { opacity: '0' }, 
    '100%': { opacity: '1' },
  },
})

I have also tried adding my keyframe animation to the inline styling of the child, but that seems to not work at all.

<div
  key={item.x}
  style={{
    top: `${item.x}`,
    left: `${item.y}`,
    color: `${item.color}`,
    ... and so forth
    animation: `fade ${item.duration} ${item.delay} infinite`, // this does not work - not even with static values
    }}
  className={classes.child}
/>

I'm posting here hoping that someone knows how to overcome my issue. Let me know your thoughts. I'm pretty sure it is possible with StyledComponents , but I don't feel like installing another styling library just to overcome this very specific issue.

I'm pretty sure that I at some point worked with CSS custom variables var(--duration) & var(--delay) , and it could do some pretty nice things (might even fix this issue), but I have been unable to find anything usable on the topic as of today. The issue is mostly how I inject the custom variables into my styling. If you know how I need to set this up, let me know.

Thanks in advance.

Answer 1

I found the solution that I was wanting.

The reason it didn't work was due to "random naming" from Material UI makestyles package. So what I ended up doing was to use the animation source in the makestyles package:

const useStyles = makeStyles({
  root: { ... }, 
  child: {
    ...
    animationName: '$fade',
  },
  '@keyframes fade': {
    '0%': { opacity: '0' }, 
    '100%': { opacity: '1' },
  },
})

And then changing the duration and delay in the inline styling as follows:

<div
  key={item.x}
  style={{
    animationDuration: `${item.duration}s´,
    animationDelay: `${item.delay}s`,
    animationIterationCount: 'infinite', 
  }}
  className={classes.child}
/>