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

Question

我基本上有这样的想法：

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

但是不透明会被砍掉，而且需要一段时间。

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

Answer 1

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

您可以尝试使用帮助器来计算这些值，http://chenglou.github.io/react-motion/demos/demo5-spring-parameters-chooser/

在我看来，问题在于挂载/dismount的问题，但是如果你不关心，你可以直接将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

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

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

请看我的例子：fade example with delay using hooks