是否有可能延迟淡出的过渡？

Question

目标:我希望在一段时间过去后(例如: 4000毫秒)，会发生淡出的转换。

下面是我的代码片段：

<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毫秒后结束。

是否支持将淡出转换延迟到指定的时间？

(查看褪色API，我认为duration.enteringScreen意味着转换发生前的毫秒数，但我可能弄错了。)

Answer 1

淡入不会实现延迟特性，但是您可以使用手动处理过渡状态。

在……里面 显示组件；触发输入或退出状态 类型：布尔型 默认：false

在代码中，可以这样做：

<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

在资料用户界面文档的"Components > Transitions > Zoom demo“中，有一些实现它的例子；比触摸状态更优雅一些！

在esence中，您可以将style属性传递给Fade组件并设置延迟(transitionDelay)。在下面的代码中，我们迭代一个结果数组，并使每个单独的元素被显示，并且比以前延迟了100 In。

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

Answer 3

为了摆脱塞巴斯蒂恩巴比尔，您可以创建一个自定义转换组件，它只需传递一个delay支柱就可以为您处理状态。

下面是组件的样子(我添加了其他有用的道具)：

const MyFade = ({
   children,
   in: In = true,
   timeout = 1000,
   delay = 0
}) => {
   const [isIn, setIsIn] = useState(In && delay === 0)

   useEffect(() => {
      if (delay > 0) {
         setTimeout(() => setIsIn(true), delay)
      }
   })

   return (
      <Fade in={isIn} timeout={timeout}>
         {children}
      </Fade>
   )
}

然后让你的具体问题等待4000毫秒：

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