我正在使用 React
使用他们的 ReactCSSTransitionGroup
插件来为 div
的宽度设置动画。请检查 fiddle here .
点击,每次点击红色的div
都会模拟一次转场。
opacity
过渡在这种情况下运行良好。但是,任何其他属性,如 width
、height
或 left
、top
(对于绝对定位的元素)都不起作用.这可能是什么问题?
最佳答案
在尝试使用比不透明度更复杂的过渡之前,准确了解 ReactCSSTransitionGroup
的工作原理很重要。
当您指定一个转换名称为example
时,调用render()
时会发生以下步骤:
- 组件被渲染到 DOM 类
example-enter
- 下一步:组件添加类
example-enter-active
- 下一步:
example-enter
和example-enter-active
从 Component 类中移除。
卸载组件时,会发生以下步骤:
- 组件接收类
example-leave
- 下一步:组件删除类
example-leave
并添加类example-leave-active
- 下一步:组件从 DOM 中移除
由于添加/删除这些类的方式,我发现为 max-width
或 max-height
设置动画比 更直观>宽度
或 高度
。
我已经编辑了你的 fiddle 来举个例子:
关于javascript - 无法在 "width"或 "left"属性上应用 ReactCSSTransitionGroup,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30756369/