内联转换持续时间奇怪的行为答案

【问题标题】：Inline transition duration weird behavior内联转换持续时间奇怪的行为
【发布时间】：2020-06-03 14:27:18
【问题描述】：

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

问题是，当我取消注释带有持续时间的内联样式时，动画首先会上升，但随后会倒退并且不应该。我错过了什么？当*-enter-active 类关闭时，动画文本应该被隐藏，因为diff 类。也许浏览器不会重新计算样式？为什么在 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;
}

【问题讨论】：

标签： reactjs css-transitions react-transition-group

【解决方案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;
}

【讨论】：