reactjs – 如何使用ReactCSSTransitionGroup在React中激活元素

发布时间：2020-12-15 20:52:10 所属栏目：百科来源：网络整理

导读：我试图用ReactCSSTransitionGroup来动画元素高度, 所以这就是我想要的动画看起来像： http://jsfiddle.net/cherrry/hgk4Lme9/ 问题是我不总是知道元素的高度, 所以我试图在componentDidMount中劫持scrollHeight,clientHeight或类似的东西,并尝试设置node.sty

我试图用ReactCSSTransitionGroup来动画元素高度,
所以这就是我想要的动画看起来像：

http://jsfiddle.net/cherrry/hgk4Lme9/

问题是我不总是知道元素的高度,
所以我试图在componentDidMount中劫持scrollHeight,clientHeight或类似的东西,并尝试设置node.style.height或添加规则到样式表

http://jsfiddle.net/cherrry/dz8uod7u/

离开动画看起来不错,但是当元素进入时,它会闪烁一点,缩放动画看起来很奇怪

应该是因为要求node.scrollHeight导致渲染立即发生,所以有没有得到相同的信息,并在动画开始之前注入css规则？还是应该等一下呢？

我对max-height解决方案并不十分满意,因为当max-height不接近或小于height时,结果的动画速度将非常奇怪,而且我的组件的高度有很大差异.

我可以想象,最终的解决方案可能会有点凌乱,
但我认为将它变成一个Mixin将会很好地重用它在任何地方

经过更多的实验,我已经提出了一个解决方案,使用低级的API ReactTransitionGroup而不是高级别的ReactCSSTransitionGroup

这是JSFiddle的一个工作解决方案：http://jsfiddle.net/cherrry/0wgp34cr/

在动画之前,它做了3件事情：

>获得计算的高度,填充和边距
>使用display：none隐藏元素,并添加.anim-enter将高度设置为0
>为.anim-enter-active创建css规则

要开始动画,它做了2件事情：

>取消隐藏元素
>添加.anim-enter-active启动动画

JSFiddle中的一些数字和类名称是硬编码的,但是应该很容易将“mixin”转换为React类作为ReactCSSTransitionGroup的替代

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!