内联过渡持续时间奇怪的行为

Question

我正在使用 CSSTransition 制作文本的浮动动画。它有效，但前提是我在 css 文件中指定动画的持续时间。我想要的是将持续时间参数保存在一个地方（js 文件）以保持代码干燥。现在我需要在 css class 和 CSSTransition 的 timeout prop.

中指定它

问题是当我取消注释带持续时间的内联样式时，动画先上升，然后倒退，这是不应该的。我错过了什么？当 *-enter-active class 关闭时，动画文本应该隐藏，因为 diff class。也许浏览器不会重新计算样式？为什么在 css 中指定持续时间时有效，而在 style prop 中指定时无效？

这是 codepen。取消注释 js 文件中的第 20 行以查看错误。

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

Answer 1

我明白了。我需要用 display 替换 visibility 道具。这样就可以了。此外，display: block 应该在单独的 .diff-enter 规则中指定，而不是在 .diff-enter-active 中指定。因此，样式变为：

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

.diff-enter {
  display: block;
}

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

内联过渡持续时间奇怪的行为

Inline transition duration weird behavior

css-transitions

reactjs

react-transition-group