无法使用 CSSTransition 组创建平滑滚动

Question

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

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

虽然我能够设置颜色和不透明度等属性的动画，但我无法设置高度 and/or max-height 等属性的动画来实现内容从上到下或从下到下逐渐消失最佳。

当项目进入和离开 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;

我当前的 class 进入状态是：

.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>
    );
  }
}

style.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。希望对你有帮助

无法使用 CSSTransition 组创建平滑滚动

Not able to create a smooth scroll with CSSTransition Group

html

javascript

css

reactcsstransitiongroup

react-transition-group