CODEWITHSUNDEEP
reactjsanimationreact-motion
Lance Pollard
Lance Pollard

Reputation: 79468

How to do a simple fade in transition on React Motion?

I have this basically:

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

But the opacity chops and takes a while.

I just want to say "fade in ease-in-out 300ms". Can anything like this be done with react-motion? Or must you use react-transition-group?

Upvotes: 1

Views: 1128

Answers (2)

dowi
dowi

Reputation: 1045

You should not use the given "style" as the style prop You should use it as such:

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

see my example here: fade example with delay using hooks

Upvotes: 0

windmaomao
windmaomao

Reputation: 7680

I don't think that can be changed, but the velocity seems can be adjusted from stiffness and damping, https://github.com/chenglou/react-motion/issues/265

You can try a helper to figure out those values, http://chenglou.github.io/react-motion/demos/demo5-spring-parameters-chooser/

The trouble seems to me is the mount /dismount issue, but if you don't care, you could just setmount to be 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,
}

Upvotes: 0

Related Questions