动画在 React 16.13.1 的父组件之外不起作用

Question

我面临一个问题，如果我将子组件与主组件分开，我的关键帧动画将停止工作。

有问题的动画是一个简单的扩展容器，每次容器内容发生变化时都会播放。

我的 Abouts.js（主要组件）：

const About = React.forwardRef((props, ref) => {
  const [ topic, setTopic ] = useState('react')
  const [ logo, setLogo ] = useState(topicsList[0].logo)
  const [ active, setActive ] = useState(0)
  
  ...

  const handleTopicChange = (topic, index, logo) => {
    setTopic(topic.toLowerCase())
    setLogo(logo)
    setActive(index)
  }

  //Creates buttons from a list of topics and adds the functionality to switch between them
  const createButtons = () =>
    topicsList.map((topic, index) => (
      <Button
        key={topic.name.toLowerCase()}
        onClick={() => handleTopicChange(topic.name, index, topic.logo)}
        active={active === index}
      >
        {topic.name.toLowerCase().includes('csharp') ? 'C#' : topic.name.toUpperCase()}
      </Button>
    ))
  
  ...

  //Renders the Container with content based on the topic hook which gathers content from an i18next file
  const Topic = props => {
  const value = props.value.includes('c#') ? 'csharp' : props.value
  return (
    <TopicContainer>
      <TopicTitle
        style={{ textAlign: 'left' }}
        $color={props.theme === dark ? dark.colors[value] : light.colors[value]}
      >
        {t(`titles.about.${value}`)}
      </TopicTitle>
      <div dangerouslySetInnerHTML={{ __html: props.children }} />
    </TopicContainer>
    )
   }

   return(
   ...
   {createButtons()}
   <Topic theme={props.theme} value={topic}>
      {t(`paragraphs.${topic}`)}
   </Topic>
   ...
)
}

我的styles.js（样式化组件文件）：

...

const expand = keyframes`
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1); 
  }
`

const expandAnimation = css`
  animation: css`${expand} 300ms ease`;
`

const blogText = css`
  font-size: ${props => props.theme.fonts.size.xs};
  font-weight: ${props => props.theme.fonts.weight.normal};
  color: ${props => props.theme.colors.neutralLight};
  @media ${device.greaterThan.laptopLMin} {
    font-size: ${props => props.theme.fonts.size.md};
  }
`

export const TopicContainer = styled.div`
  ${expandAnimation};
  ${blogText};
  width: 85%;
  margin: 0 auto;
  margin-bottom: 2rem;
  & div {
    width: 100%;
    float: left;
  }
  & p {
    width: 100%;
    @media ${device.greaterThan.laptopLMin} {
      width: 70%;
    }
  }
`
...

现在，一切正常，并且符合预期。问题是，当我将子 (Topic) 组件移到其父 (About) 组件之外时，我的动画将停止工作（刷新时的第一个渲染 aka 除外这页纸）。即使容器内的内容和以前一样发生变化，我的控制台中也没有收到任何负面消息。

我会指定我正在使用样式化组件，但我尝试为相同的目的创建一个 css 文件，以防问题与样式化组件有关，但结果是相同的。在我的孩子搬出去之前一切都很好......

如果缺少信息，请告诉我。

Answer 1

要让动画运行，您需要将 props.main 或 props.signature 传递给样式化组件

const expandAnimation = css`
  animation: ${props => (props.signature || props.main ? 'none' : css`${expand} 300ms ease;`)};
`const expandAnimation = css`
  animation: ${props => (props.signature || props.main ? 'none' : css`${expand} 300ms ease;`)};
`

你的 TopicContainer 应该是；

let isSignature=true;
let isMain=true;

   <TopicContainer signature={isSignature} main={isMain}>
      <TopicTitle
        style={{ textAlign: 'left' }}
        $color={props.theme === dark ? dark.colors[value] : light.colors[value]}
      >
        {t(`titles.about.${value}`)}
      </TopicTitle>
      <div dangerouslySetInnerHTML={{ __html: props.children }} />
    </TopicContainer>

由于我没有找到对签名或 main 的任何引用，因此我正在创建虚拟变量以作为道具传递。