React中的Animate元素

Question

我在react / mobx应用程序中有一个组件，它可以观察提供的ui存储的某个属性。每当此属性更改时，组件的某些元素将隐藏/显示。 据我所知，ReactCSSTransitionGroup用于在挂载/卸载时动画组件。如何在组件中设置一个元素（一个div是精确的）的动画，这个元素通过display:none隐藏，但在商店属性的处理时会出现？

Answer 1

而不是display: none，您应该设置隐藏opacity: 0并显示opacity: 1。然后，您可以使用基本的CSS过渡（如

）为过渡设置动画

-webkit-transition: all 1s;
transition: all 1s;

Answer 2

查看css animation属性。在将元素添加到DOM时，它将为元素设置动画。因此，请勿使用display:none隐藏元素，而只是不要渲染它。当props更改时，只需使用css动画定义它;）

所有浏览器都支持它，来自v10的IE（这已足够）。