reactjs - 如何在reactjs中执行相当于jQuery的slideToggle()？

Question

基本思想是在reactjs中制作jQuery的slideToggle()动画。

隐藏一个元素并根据其状态显示它相当简单，但实际上对高度进行动画处理，使其看起来像上下滑动，似乎比我在reactjs中想象的更复杂。我用谷歌搜索过这种类型的动画，但找不到任何东西。

我发现的最接近的是人们说使用“max-height”css 属性并用它来制作动画，但是，这要求您在想要制作动画的所有 div 上设置 max-height。对于响应式内容来说，这并不是正确的方法。在一个屏幕上所需的最大高度可能是 200，但在移动设备上可能是 500!

到目前为止，我可以轻松地折叠/展开具有状态的组件，就像我所说的那样，但是如何将其展开以实际制作动画？并处理中间动画点击，以便在需要时返回？

height-0 css 类就是这样的:

.height-0 {
    overflow: hidden;
    max-height: 0;
}



import React, { Component, PropTypes } from 'react';

export default class CollapsableComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false
    };
  }

  toggleCollapse(){
    this.setState({
      ...this.state,
      collapsed: this.state.collapsed ? false : true;
    });
  }

  render() {
    return (    
      <div class="row">
        <div class="col-sm-12">
          <h2>Some Title....
            <button class="btn btn-default pull-right" onClick={this.toggleCollapse}>
              <span class={`fa fa-${collapsed ? 'expand' : 'compress'}`} aria-hidden="true"/>
            </button>
          </h2>
          <div class={`animation-holder${collapsed ? ' height-0' : ''}`} ref={(div) => { this.holderDiv = div;}}>
            <p>content here......</p>
          </div>
        </div>
      </div>      
    );
  }
}

Answer 1

我能想到的最简单的方法如下:Sandbox

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const style = {
    overflow: "hidden",
    height: isOpen ? 50 : 0,
    transition: "2s"
  };

  return (
    <div className="App">
      <div style={style}>
        <p> Let me slide in and out!</p>
      </div>
      <button onClick={() => setIsOpen(prev => !prev)}>Slide Toggle</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如果需要组件的实际高度，您可以使用 useRef Hook 检索它，如下所示:ref.current.clientHeight。