javascript - 无法在 "width"或 "left"属性上应用 ReactCSSTransitionGroup

Question

我正在使用 React 使用他们的 ReactCSSTransitionGroup 插件来为 div 的宽度设置动画。请检查 fiddle here .

点击，每次点击红色的div都会模拟一次转场。

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

Answer 1

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

当您指定一个转换名称为example 时，调用render() 时会发生以下步骤:

1. 组件被渲染到 DOM 类 example-enter
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 设置动画比 更直观>宽度 或 高度。

我已经编辑了你的 fiddle 来举个例子:

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