CODEWITHSUNDEEP
reactjscss-transitionsreact-transition-group
dhmk083
dhmk083

Reputation: 271

Inline transition duration weird behavior

I'm making a floating up animation of a text with CSSTransition. It works, but only if I specify animation's duration in css file. What I want is to keep duration parameter in one place (js file) to keep code DRY. Right now I need to specify it in both css class and CSSTransition's timeout prop.

The problem is that when I uncomment inline style with duration, the animation first goes up, but then it goes backwards and it shouldn't. What am I missing? When *-enter-active class goes off the animated text should become hidden, because of the diff class. Maybe the browser doesn't re-calculate styles? Why does it work, when duration is specified in css and doesn't work when it is in style prop?

Here's the codepen. Uncomment line 20 in js file to see the bug.

const AnimatedDiff = ({value}) => {
  const [prev, setPrev] = React.useState(value)
  const diff = value - prev
  const diffSign = diff > 0 ? '+' : ''
  const diffStr = diffSign + diff

  const timeout = 800

  return (
    <CSSTransition 
      classNames='diff' 
      timeout={timeout} 
      in={diff > 0}
      onEntered={() => setPrev(value)}
    >
      <div 
        className='diff'
        // style={{transitionDuration: `${timeout}ms`}}
      >
        {diffStr}
      </div>
    </CSSTransition>
  )
}

.diff {
  position: absolute;
  right: 0;
  visibility: hidden;
}

.diff-enter-active {
  visibility: visible;
  transform: translate(0, -100%);
  transition: transform;
  transition-duration: 800ms;
}

Upvotes: 1

Views: 367

Answers (1)

dhmk083
dhmk083

Reputation: 271

I've got it. I need to replace visibility prop with display. This does the trick. Also, display: block should be specified within a separate .diff-enter rule, not in a .diff-enter-active. So, styles become:

.diff {
  position: absolute;
  right: 0;
  display: none;
}

.diff-enter {
  display: block;
}

.diff-enter-active {
  transform: translate(0, -100%);
  transition: transform;
}

Upvotes: 1

Related Questions