无法在＆＃34; width＆＃34;上应用ReactCSSTransitionGroup。或＆＃34;左＆＃34;属性

Question

我正在使用React使用div插件为ReactCSSTransitionGroup的宽度设置动画。请检查小提琴here。

点击，每次红色div都会模拟过渡。

opacity过渡在这种情况下运作良好。但是，width，height或left，top（对于绝对定位的元素）等任何其他属性都不起作用。这可能是什么问题？

Answer 1

在尝试使用比不透明度更复杂的过渡之前，确切了解ReactCSSTransitionGroup的工作原理非常重要。

如果指定转换名称example，则在调用render()时会执行以下步骤：

1. 使用类example-enter
将组件呈现到DOM中
2. 下一个勾选：组件添加了班级example-enter-active
3. 下一个勾选：example-enter和example-enter-active已从Component类中删除。

卸载组件时，会执行以下步骤：

1. 组件接收类example-leave
2. 下一个勾选：组件删除班级example-leave并添加班级example-leave-active
3. 下一个勾选：从DOM中删除组件

由于添加/删除这些类的方式，我发现动画max-width或max-height代替width或{{1}更直观}。

我编辑了你的小提琴，举例说明：

http://jsfiddle.net/kb3gN/11374/

Answer 2

您放在style道具中的CSS属性将应用为样式表中定义的内联样式和覆盖属性，除非您为后面的!important标记分配。

在您的情况下，您在javascript中设置的width和height CSS属性优先于您在样式表中定义的width和height