Question

当我阅读有关React Transition的文档时，我注意到他们通常将CSS过渡部分放在enter-active和exit-active类中，而不是进入enter和exit类中。

struct L{
    static void _() const {} 
    operator auto () const{ 
        return &L::_();
    }
};

function App() {
  const [inProp, setInProp] = useState(false);
  return (
    <div>
      <CSSTransition in={inProp} timeout={200} classNames="my-node">
        <div>
          {"I'll receive my-node-* classes"}
        </div>
      </CSSTransition>
      <button type="button" onClick={() => setInProp(true)}>
        Click to Enter
      </button>
    </div>
  );
}

.my-node-enter {
  opacity: 0;
}
.my-node-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.my-node-exit {
  opacity: 1;
}
.my-node-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

我的意思是，在代码中，确定内容出现多长时间的部分是由<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>的{{1}}属性（而不是CSS）确定的。内容完全消失前需要多长时间也是如此。所以我的第一个问题是为什么需要设置过渡持续时间？

我问的另一个问题是过渡部分如何插入。在文档中说，进入状态时，组件将首先在timeout之前渲染CSSTransition。据我了解，CSS过渡定义了在定义过渡属性之后后CSS属性发生变化的情况。因此，在这种情况下，过渡部分在它们进入组件之后就没有用了，而在组件完成进入之后什么也不会发生（我很简单，我们只考虑进入和退出状态）。

但是，当我尝试删除该过渡部分时

.my-node-enter

内容几乎立即出现并消失，这很奇怪，因为.my-node-enter-active仍应设置为200，因此会出现延迟。而且我不知道为什么

.my-node-enter {
  opacity: 0;
}
.my-node-enter-active {
  opacity: 1;
}
.my-node-exit {
  opacity: 1;
}
.my-node-exit-active {
  opacity: 0;
}

会插入这里。

有人可以解释为什么吗？

为什么在使用react-transition-group时将CSS过渡放在enter-active而不是enter呢？

0 个答案: