Question

我在React中实现了自己的响应式手风琴，并且我无法让它为折叠的开头设置动画。

这特别奇怪，因为我可以在标题之前获取图标来上下动画，除了图标是伪元素之外，我似乎无法看到两者之间的差异。

JS：

class Accordion extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: -1
    };
  }
  /***
   * Selects the given fold, and deselects if it has been clicked again by setting "active to -1" 
   * */
  selectFold = foldNum => {
    const current = this.state.active === foldNum ? -1 : foldNum;
    this.setState(() => ({ active: current }));
  };

  render() {
    return (
      <div className="accordion">
        {this.props.contents.map((content, i) => {
          return (
            <Fold
              key={`${i}-${content.title}`}
              content={content}
              handle={() => this.selectFold(i)}
              active={i === this.state.active}
            />
          );
        })}
      </div>
    );
  }
}

class Fold extends React.Component {
  render() {
    return (
      <div className="fold">
        <button
          className={`fold_trigger ${this.props.active ? "open" : ""}`}
          onClick={this.props.handle}
        >
          {this.props.content.title}
        </button>
          <div
            key="content"
            className={`fold_content ${this.props.active ? "open" : ""}`}
          >
            {this.props.active ? this.props.content.inner : null}
          </div>
      </div>
    );
  }
}

CSS：

$line-color: rgba(34, 36, 38, 0.35);

.accordion {
  width: 100%;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  border-radius: 10%;
  overflow-y: auto;
}

.fold {
  .fold_trigger {
    &:before {
      font-family: FontAwesome;
      content: "\f107";
      display: block;
      float: left;
      padding-right: 1rem;
      transition: transform 400ms;
      transform-origin: 20%;
      color: $line-color;
    }

    text-align: start;
    width: 100%;
    padding: 1rem;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    border-bottom: 1px solid $line-color;

    &.open {
      &:before {
        transform: rotateZ(-180deg);
      }
    }
  }

  .fold_content {
    display: none;
    max-height: 0;
    opacity: 0;
    transition: max-height 400ms linear;

    &.open {
      display: block;
      max-height: 400px;
      opacity: 1;
    }
  }
  border-bottom: 1px solid $line-color;
}

这是CodePen：https://codepen.io/renzyq19/pen/bovZKj

Answer 1

如果您想要平稳过渡，我不会有条件地呈现内容。这将使幻灯片的动画特别棘手。

我会改变这个：

{this.props.active ? this.props.content.inner : null}

到此：

{this.props.content.inner}

并使用此scss：

.fold_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;

  &.open {
    max-height: 400px;
  }
}

尝试下面的代码段或看到分叉的 CodePen Demo 。

＆＃13;

class Accordion extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: -1
    };
  }
  /***
   * Selects the given fold, and deselects if it has been clicked again by setting "active to -1" 
   * */
  selectFold = foldNum => {
    const current = this.state.active === foldNum ? -1 : foldNum;
    this.setState(() => ({ active: current }));
  };

  render() {
    return (
      <div className="accordion">
        {this.props.contents.map((content, i) => {
          return (
            <Fold
              key={`${i}-${content.title}`}
              content={content}
              handle={() => this.selectFold(i)}
              active={i === this.state.active}
            />
          );
        })}
      </div>
    );
  }
}

class Fold extends React.Component {
  render() {
    return (
      <div className="fold">
        <button
          className={`fold_trigger ${this.props.active ? "open" : ""}`}
          onClick={this.props.handle}
        >
          {this.props.content.title}
        </button>
          <div
            key="content"
            className={`fold_content ${this.props.active ? "open" : ""}`}
          >
            {this.props.content.inner}
          </div>
      </div>
    );
  }
}

const pictures = [
  "http://unsplash.it/200",
  "http://unsplash.it/200",
  "http://unsplash.it/200",
];
var test = (title, text, imageURLs) => {
  const images=
    <div className='test-images' >
      {imageURLs.map((url,i) => <img key={i} src={url} />)}
    </div>;

  const inner =
    <div className='test-content' >
      <p>{text} </p>
      {images} 
    </div>;
  
  return {title, inner};
};

const testData = [
  test('Title', 'Content',pictures ),
  test('Title', 'Content',pictures ),
  test('Title', 'Content',pictures ),
  test('Title', 'Content',pictures ),
  test('Title', 'Content',pictures ),
];

ReactDOM.render(<Accordion contents={testData} />, document.getElementById('root'));

＆＃13;

.accordion {
  width: 100%;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  border-radius: 10%;
  overflow-y: auto;
}

.fold {
  border-bottom: 1px solid rgba(34, 36, 38, 0.35);
}

.fold .fold_trigger {
  text-align: start;
  width: 100%;
  padding: 1rem;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  border-bottom: 1px solid rgba(34, 36, 38, 0.35);
}

.fold .fold_trigger:before {
  font-family: FontAwesome;
  content: "\f107";
  display: block;
  float: left;
  padding-right: 1rem;
  transition: transform 400ms;
  transform-origin: 20%;
  color: rgba(34, 36, 38, 0.35);
}

.fold .fold_trigger.open:before {
  transform: rotateZ(-180deg);
}

.fold .fold_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
}

.fold .fold_content.open {
  max-height: 400px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

<div id='root'></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

注意：

我在转换过程中使用了ease而不是linear，因为我觉得它效果更好。但这只是个人品味。 linear也可以使用。

此外，您可以继续有条件地呈现内容。可以进行下滑动画，但不容易实现上滑。您可以探索一些transition libraries。

但是，我认为最简单的方法是将状态用于条件类（就像使用open类一样）。我认为有条件地将内容呈现给DOM会让你的生活变得困难，如果你正在尝试做CSS动画。

为什么我的React手风琴动画不会起作用？

1 个答案: