javascript - 无法使用 CSSTransition Group 创建平滑滚动

Question

我正在尝试使用CSSTransitionGroup(或ReactTransitionGroup)为内容在dom中出现和消失时创建垂直平滑滚动效果。

我知道使用纯 css 中的过渡来动画化这种效果的方法，但是当一个元素出现在 DOM 中然后离开 DOM 时，我需要能够在 React 中执行此操作，因此 CSSTransitionGroup 似乎是正确的解决方案。

虽然我能够对颜色和不透明度等属性进行动画处理，但对高度和/或最大高度等属性进行动画处理以实现内容从上到下或从下到上逐渐消失的效果并不成功。

当元素进入和离开 DOM 时，如何制作像这样平滑滚动的动画效果？我当前使用 CSSTransitionGroup 的代码如下:

class App extends React.Component {
  state = {
    random: true
  };

  toggleItem = () => {
    this.setState({
      random: !this.state.random
    });
  };

  render() {
    console.log("random", this.state.random);
    return (
      <div>
        <button onClick={this.toggleItem}>toggle item</button>
        <br />
        <CSSTransition
          in={this.state.random}
          timeout={400}
          classNames="alert"
          unmountOnExit
          appear
          enter={false}
        >
          <div class="back">
            Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa fdasfas asdfasdf
            afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads asdfasdf
            asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa
            fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads
            asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf
            asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads
            asdfads asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd
            asdfasdf asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf
          </div>
        </CSSTransition>
      </div>
    );
  }
}
export default App;

我当前的输入状态类别是:

.alert-enter {
  height: 0px;
  visibility: hidden;
  overflow: hidden;
}
.alert-enter-active {
  height: auto;
  overflow: auto;

  visibility: visible;
  transition: all 300ms;
}

Answer 1

您可以添加一个白色 div 和过渡，以包裹您的文本 div

class App extends Component {
state = {
    random: false
  };

  toggleItem = () => {
    this.setState({
      random: !this.state.random
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.toggleItem}>toggle item</button>
        <br />
        <div className="back">
          Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa fdasfas asdfasdf
          afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads asdfasdf
          asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa
          fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads
          asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf
          asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads
          asdfads asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd
          asdfasdf asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf
          <CSSTransition
            in={this.state.random}
            timeout={1000}
            classNames="alert"
            unmountOnExit
          >
            <div className="white" />
          </CSSTransition>
        </div>
      </div>
    );
  }
}

样式.css

.alert-enter {
  transform: translateY(400px);
}
.alert-enter-active {
  transform: translateY(0px);
  transition: all 1000ms;
}
.alert-exit {
  transform: translateY(0px);
}
.alert-exit-active {
  transform: translateY(800px);
  transition: all 3000ms;
}
.back {
  position: relative;
  overflow: hidden;
}
.white {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  width: 100%;
}

您可以在这里查看CodeSandBox 。希望对您有帮助