所以这就是我想要的动画看起来像:
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将会很好地重用它在任何地方
这是JSFiddle的一个工作解决方案:http://jsfiddle.net/cherrry/0wgp34cr/
在动画之前,它做了3件事情:
>获得计算的高度,填充和边距
>使用display:none隐藏元素,并添加.anim-enter将高度设置为0
>为.anim-enter-active创建css规则
要开始动画,它做了2件事情:
>取消隐藏元素
>添加.anim-enter-active启动动画
JSFiddle中的一些数字和类名称是硬编码的,但是应该很容易将“mixin”转换为React类作为ReactCSSTransitionGroup的替代
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。