reactjs - 如何在 React Motion 上进行简单的淡入淡出？

Question

我基本上有这个：

<Motion defaultStyle={{opacity: 0}} style={{ opacity: spring(1, { stiffness: 210, damping: 20 }) }}>{style => {
  return <div style={style}>
</Motion>

但是不透明度会断断续续，需要一段时间。

我只想说“淡入淡出 300 毫秒”。可以用 react-motion 完成这样的事情吗？还是必须使用 react-transition-group？

Answer 1

你不应该使用给定的“风格”作为风格道具你应该这样使用它：

<Motion defaultStyle={{opacity: 0}} style={{ opacity: spring(1, { stiffness: 210, damping: 20 }) }}>{style => {
  return <div style={{opacity: style.opacity}>
</Motion>

在此处查看我的示例：使用钩子延迟淡入淡出示例

Answer 2

我不认为可以改变，但似乎可以调整速度stiffness and damping，https://github.com/chenglou/react-motion/issues/265

您可以尝试帮助找出这些值，http://chenglou.github.io/react-motion/demos/demo5-spring-parameters-chooser/

在我看来，问题是挂载/卸载问题，但如果你不在乎，你可以设置mount为假。

const Fade = ({
  Style, on, mount, children
}) => {
  const [animating, setAnimating] = useState(true)
  const onRest = () => { setAnimating(false) }
  useEffect(() => { setAnimating(true) }, [on])

  if (mount) {
    if (!on && !animating) {
      return null
    }
  }

  return (
    <Style
      on={on}
      onRest={onRest}
    >
      {children}
    </Style>
  )
}

Fade.propTypes = {
  Style: elementType,
  on: bool,
  mount: bool,
}