在

Question

目标：我希望在一定时间（例如：4000毫秒）过去之后，进行Fade的过渡。

这是我的代码的一部分：

<Fade in timeout={{ enter: 8000 }}>
  <Box display="flex" justifyContent="center">
    <IconButton href="https://soundcloud.com/jyillamusic">
      <Soundcloud />
    </IconButton>
    <IconButton href="https://www.instagram.com/justinyum98/">
      <Instagram />
    </IconButton>
  </Box>
</Fade>

预期结果：对于enter: 8000，我希望转换会在8000毫秒后发生。

实际结果：转换从0毫秒开始，在8000毫秒后结束。

淡入淡出是否支持将淡入淡出过渡延迟指定的时间？

（看着Fade's API，我认为duration.enteringScreen意味着过渡发生之前的毫秒数，但我可能会误会。）

Answer 1

淡入淡出没有实现延迟功能，但是您可以使用in 手动处理过渡状态。

在

显示组件；触发进入或退出状态
   类型：布尔值
  默认：否

在代码中，您可以执行以下操作：

<Fade in={this.state.in} timeout={{ enter: 8000 }}>
  <Box display="flex" justifyContent="center">
    <IconButton href="https://soundcloud.com/jyillamusic">
      <Soundcloud />
    </IconButton>
    <IconButton href="https://www.instagram.com/justinyum98/">
      <Instagram />
    </IconButton>
  </Box>
</Fade>

在显示器上运行超时以等待并创建延迟

this.state = {
    in: false
};

setTimeout(() => {
    setState({ in: true });
}, 8000);

Answer 2

在 Material UI 文档的“Components > Transitions > Zoom demo”中有一些示例来实现它；比触摸状态优雅一点！

本质上，您可以将 style 属性传递给 Fade 组件并设置延迟 (transitionDelay)。在下面的代码中，我们迭代了一个结果数组，并导致每个单独的元素比前一个延迟 100 毫秒。

 {profileItems.map((pi, index) => (
    <Fade in={profileItems.length > 0}
          timeout={{ enter: 500, exit: 250 }}
          style={{ transitionDelay: `${index * 100}ms` }}
          key={`asi-${pi.key}-${index}`}>
       <span>
         <DisplayItem profileItem={pi} />
       </span>
   </Fade>))}

有可能延迟Fade的过渡吗？

2 个答案:

在