如何在反应运动过渡中进行简单淡出

Question

我基本上有一个：

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

但是不透明的排骨需要一段时间。

我只想说"淡入300ms的淡入淡出"。这样的事情可以用反应运动来完成吗？还是必须使用React-Transition Group？

Answer 1

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

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

在我看来，麻烦似乎是安装/下马问题，但是如果您不在乎，您可以将mount设置为false。

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

Answer 2

您不应使用给定的"样式"。作为风格道具您应该这样使用：

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

请参阅我的示例：使用挂钩