React - 注入带动画的内联样式

Question

我有一个组件需要为其每个 children 设置不同的动画。

我正在使用 React Hooks 和 Material UI 来设计我的组件。

我的组件如下所示：

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>
  );
};

我的问题是我想要为 children 元素触发不同的动画。我已经尝试为 makeStyles 样式添加一个关键帧动画部分，如果我只是在那里定义它，我可以轻松添加样式和关键帧动画，并且它有效！但是，据我所知，如果我在那里为每个 child 元素添加不同的参数，我会遇到问题。

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' },
  },
})

我也尝试过将我的关键帧动画添加到 child 的内联样式中，但这似乎根本不起作用。

<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}
/>

我在这里发帖希望有人知道如何解决我的问题。让我知道你的想法。我很确定 StyledComponents 可以做到这一点，但我不想安装另一个样式库来解决这个非常具体的问题。

我很确定我在某些时候使用了 CSS 自定义变量 var(--duration) & var(--delay)，它可以做一些非常好的事情（甚至可以解决这个问题)，但截至今天，我一直无法找到关于该主题的任何有用信息。问题主要是我如何将自定义变量注入到我的样式中。如果您知道我需要如何设置它，请告诉我。

提前致谢。

Answer 1

我找到了我想要的解决方案。

它不起作用的原因是 Material UI makestyles 包中的“随机命名”。所以我最终做的是使用 makestyles 包中的动画源：

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

然后如下更改内联样式中的持续时间和延迟：

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

React - 注入带动画的内联样式

React - Injecting inline style with animation

css

reactjs

animation

material-ui

inline-styles