25

我正在尝试使用 为元素高度设置动画ReactCSSTransitionGroup，所以这就是我希望动画看起来像的样子：

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

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

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

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

应该是因为询问node.scrollHeight导致渲染立即发生，所以无论如何在动画开始之前获取相同的信息并注入css规则？还是我应该换个角度思考？

我对这个解决方案不是很满意，因为当不接近或不小于max-height时，生成的动画速度会很奇怪，而且我的组件的高度确实变化很大。max-heightheight

我可以想象最终的解决方案可能会有点混乱，但我认为将其制成 Mixin 将足以在任何地方重用它

4

4 回答 4

37

我遇到了同样的问题，最终编写了一个独立的组件来设置高度动画。

你可以在这里看到演示： https ://stanko.github.io/react-animate-height/

它更容易使用，整个库非常小（~200 行）

<AnimateHeight
  duration={ 500 }
  height={ 'auto' }
>
  <h1>Your content goes here</h1>
  <p>Put as many React or HTML components here.</p>
</AnimateHeight>

很抱歉无耻的自我推销，但我认为如果你有多个组件要制作动画，它可以为你节省很多时间。

干杯!

于 2017-06-30T14:56:23.907 回答
17

经过更多的实验，我想出了一个使用低级 APIReactTransitionGroup而不是高级 API 的解决方案ReactCSSTransitionGroup

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

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

  1. 获取计算的高度、填充和边距
  2. 隐藏元素display: none并添加.anim-enter以将高度设置为0
  3. 为.anim-enter-active

要启动动画，它会做两件事：

  1. 取消隐藏元素
  2. 添加.anim-enter-active开始动画

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

于 2015-03-31T15:21:57.030 回答
1

如果您不想导入模块或使用 qjuery，这里是使用 React ref 的模板（https://reactjs.org/docs/refs-and-the-dom.html）

基本上你得到它的高度，增长到那个高度，切换回自动。在返回的路上切换到它的高度，然后返回到 0。

class CollapsibleSectionBlock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showContent: false,
            height: "0px",
            myRef: null,
        };
    }

    componentDidUpdate = (prevProps, prevState) => {
        if (prevState.height === "auto" && this.state.height !== "auto") {
            setTimeout(() => this.setState({ height: "0px" }), 1);
        }
    }

    setInnerRef = (ref) => this.setState({ myRef: ref });

    toggleOpenClose = () => this.setState({
        showContent: !this.state.showContent,
        height: this.state.myRef.scrollHeight,
    });

    updateAfterTransition = () => {
        if (this.state.showContent) {
            this.setState({ height: "auto" });
        }
    };

    render() {
        const { title, children } = this.props;
        return (
            <div>
                <h2 onClick={() => this.toggleOpenClose()}>
                    {title}
                </h2>
                <div
                    ref={this.setInnerRef}
                    onTransitionEnd={() => this.updateAfterTransition()}
                    style={{
                        height: this.state.height,
                        overflow: "hidden",
                        transition: "height 250ms linear 0s",
                    }}
                >
                    {children}
                </div>
            </div>
        );
    }
}
于 2019-08-02T21:18:13.743 回答
0

一个非常简单和好的方法是处理 scaleY 而不是 height。悬停应设置属性 transform: scaleY(1) （最初 => transform: scaleY(0) 以隐藏它）并且动画应以 transform 属性为目标。

于 2021-08-24T20:49:46.030 回答